Hover Interaction toggles Full Size Background Image

Community resources Product feedback
1

Hey Guys,

First post as I encounter my first issue I can’t seem to solve.

I’m trying to create an interaction which toggles a full size background image when you hover over a section. Well I’ve created it but it’s behaving very odd. Upon hover it seems like it has worked as I had hoped, but when I scroll while still within the section some funky things start happening at the bottom of the viewport.

I was also trying to do this while using the CMS, but I couldn’t figure out how to get a different background image for each project because it seems like it recognizes different projects as the same element since they’re all defined under the collection list. (The target im defining while creating the interaction)

I’d love a few pointers in the right direction. I just started using webflow this week and this is my first major roadblock to building my custom design portfolio and finding a new job :slight_smile:

Share Link: https://preview.webflow.com/preview/jeremys-first-project-74da9b?utm_source=jeremys-first-project-74da9b&preview=8eb6a7281157be28bca733d3cd5117c7

Published Link: https://jeremys-first-project-74da9b.webflow.io/

Thanks in advance!

2

Hey Guys,

So a quick update. I have the hover effect working how I want it, but it’s only occurring one time. For example, if you hover over the first project it works correctly, and when you move the cursor outside the first project it goes away. How can I get it to happen when I move the cursor over the project for the second time?

Share Link: https://preview.webflow.com/preview/jeremys-first-project-74da9b?utm_source=jeremys-first-project-74da9b&preview=8eb6a7281157be28bca733d3cd5117c7

Published Link: https://jeremys-first-project-74da9b.webflow.io/

Best,

Jeremy

3

I GOT IT. IGNORE ME :slight_smile:

I had the image section hidden instead of setting the opacity to 0. Whoops.

Happy webflowing!

1 Like
4

Great! Closing the topic :webflow_heart: