figureslibres.cc/user/themes/figureslibres/scss/theme/_animation.scss

$animate: all 0.2s ease-in-out;

#text_figli{
  z-index: 999;
  p{
    & > a{
      z-index: 999;
      &:before,
      &:after {
        content: "";
        position: absolute;
        bottom: -1px;
        width: 0px;
        height: 1px;
        margin: 1px 0 0;
        transition: $animate;
        transition-duration: 0.3s;
        opacity: 0;
        background-color: black;
      }
      &::before{
        left: 50%;
      }
      &:after{
        right: 50%;
      }
      &:hover {
        cursor: pointer;
        &:before,
        &:after {
          width: 100%;
          opacity: 1;
        }
        &:before,
        &:after {
          width: 50%;
        }
      }
    }
  }
}

.circle_hover{
  position: absolute;
  width: 0px;
  height: 0px;
  background: $color_culturelle;
  border-radius: 500px;
  transform: translate(-50%, -50%);
  z-index: 0;
  transition: height .2s, width .2s;
  &.open{
    width: 200px;
    height: 200px;
    transition: height .5s, width .5s;
  }
  &.publique{
    background: $color_publique;
  }
  &.sociale{
    background: $color_sociale;
  }
  &.culturelle{
    background: $color_culturelle;
  }
}