Drop Shadow Hover Effect

New to Webflow and wanting to create a drop shadow effect behind an image that changes position on hover. Similar to the “Program” images on the right side of this site: https://www.banff.it/programma/

I assumed this would be a simple task, but I am not sure where to begin to create a drop shadow behind the image itself. What is the best way to go about achieving this effect and making it responsive so both the image and shadow resize together?

Hello,

  1. add a box shadow to the image itself.
  2. select the hover state from the dropdown in the class selector.
  3. move the box shadow as needed.
  4. dont forget to remove the hover state tag in the class selector.
  5. add a transition to the box shadow for a smoother effect.

I am new to webflow, myself. I hope this helps :slight_smile: Let me know, did it work or not.

2 Likes

Thank you @Sahil.M - worked perfectly! I knew it was something simple. Appreciate the help!

1 Like

Hi can someone clarify what is meant by class selector?? thanks