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

Design help Animations & Interactions
1

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?

https://preview.webflow.com/preview/alisas-initial-project-85bf28?utm_medium=preview_link&utm_source=designer&utm_content=alisas-initial-project-85bf28&preview=72211f70b6b723d991cd1586f17e3b17&mode=preview

www.alisaprice.com

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

2

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.

3

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
4

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.