Hover state over background images which trigger a button to appear (and would darken the background image.)

Hi there,

I’m new to the Webflow family and have a quick questions about hover states. As you can see form my link, i’ve created 3 separate sections with a background image. I wanted to know if there was a way to hover over the background images and it would darken the photo and a call to action button would appear. Can someone assist with this?

Here is my public share link: LINK
(how to access public share link)

You’ll want to create an interaction with the element trigger of mouse hover for each of those 3 sections. You can set the call to action button to display: none, and have the hover interaction change to display: block (or whatever) and it can also put a filter on the photo too. Also don’t forget to set another animation for hover out to change those settings back when someone is no longer hovering over the section.

Hi Patrick,

Thanks for your response. I’m still a bit confused.

I have set the text to display none but when I try and create an interaction, it asks me to choose an element trigger it’s asking me to select and action. Some of these actions are grow, fade, flip etc. Do I need to select these?

1 Like

Above grow, fade, flip, etc, there is the option that says “Start an animation.” Select that instead, then click on the + button and you can create your own custom animation.