Streaming live at 10am (PST)

Hover effects on mobile?

I have a website that has some hover interactions in the pictures in the homepage as you can see in the link below. However I want to know how I can have the hover effect to only apply to desktop sites and not on mobile. Because there is no way to show the same hover effect in mobile devices. So how can you suggest that I change the design/effect to look good in mobile?? If you check my website and hover over the images you will understand what I mean.


Your website is not live.

You can make the default style for any element change only for tablet and smaller devices just by modifying it for that media query. If you are new to Webflow, I suggest watching the tutorial videos.

Nope, I’m not new to webflow.

I have a hover interaction for desktop version that obviously doesn’t work on mobile. So I want to be able to remove the interaction only on mobile versions. But if I remove the interaction on mobile it is also removed in desktop. So that is the problem. The website is here:

This link now works. Thanks.

I cannot view it on a desktop right now but I’ll look later. Interactions are not yet capable of being adjusted to each media query. In the meantime please go watch the tutorial videos. It will answer a lot of questions.

You do not need to use interactions to do those kind of hover effects. You can do that by adjusting the element’s hover state and changing the transition time. Just make the default not hovered state the element’s background. Then add your hover elements and then set the opacity of those elements to 0% and then go to the hover state and change them to 100%. If any of this seems confusing, watch the videos!

1 Like