Custom CSS - Hover animation, mobile responsivity

Hello, 

#1 - I would like to re-create this on-hover animation for my navigation links as shown in the Figma prototype: https://www.figma.com/proto/U6jZDvNUHVKwoe40FqhtCU/HIGH-IMPACT?page-id=0%3A1&type=design&node-id=135-286&viewport=569%2C429%2C0.21&t=MEqFC4p5Po5VEyFw-1&scaling=min-zoom&mode=design

Hi Ziggy, thank you so much! The testimonial section worked!

For the stats, how can I set up list section?

4 minutes ago, PapaJoe said:

For the stats, how can I set up list section?

In the same way you added the testimonials, but set it to Grid instead of Carousel.

Okay, thanks. 

Also, I just noticed that fluid engine only supports site-wide animations. I only want to apply the animations to images alone; Is there a way I can do that?

19 minutes ago, PapaJoe said:

I only want to apply the animations to images alone; Is there a way I can do that?

I'm not aware of a good way to do that, though it would be nice to selectively add the animations.

Okay, thanks. And the on-hover nav-links animation?

13 hours ago, PapaJoe said:

And the on-hover nav-links animation?

Try this as your starting point, you'll have to adjust the size and colour:

// Underline on hover
.header-nav-item a {
  width:0%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFBF00 65%);
  transition:ease-in-out 300ms;
  &:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFBF00 65%);
    width:65%;
  }
}
body:not(.header--menu-open) .header-nav-item--active>a {
  background-image:none;
}

On 10/24/2023 at 5:52 PM, Ziggy said:

Try this as your starting point, you'll have to adjust the size and colour:

// Underline on hover
.header-nav-item a {
  width:0%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFBF00 65%);
  transition:ease-in-out 300ms;
  &:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFBF00 65%);
    width:65%;
  }
}
body:not(.header--menu-open) .header-nav-item--active>a {
  background-image:none;
}

This is great, thank you @Ziggy!