Background Image change on hover

So I know there are a few previous post of this topic with some great feedback that i’ve looked into, but I’m still having issues. I’ve created a 2 minute video explaining my issue with the hover image not displaying. I apologize for the terrible 240p quality. Any help on this would be amazing.

http://youtu.be/uGIEDE5fst0?hd=1

This is my first post of the forum and I was wondering how you guys “publish” a preview of your webflow viewer in read-only? Anyways thanks for the help in advance!

Thanks for the reply vincent!

If you got it working, would it possibly be a property the div inheriting some sort of property? Is there a way for me to share a preview of the site within webflow and see if it works for you? Maybe caching?

http://vincent.polenordstudio.fr/snap/p1838.jpg

Guess it would help if I clicked on the link. OK here is the share link. Let me know what you get!

https://preview.webflow.com/preview/aaronchathamcom?preview=5f8b528a088ccb8511204379daea29bd

You must have been lost in the process, too many things. i simply removed all the properties of the hover state for the parent element… The rest, you had good, so now it works.

Why was it blinking? Well, you had 2 hovers events piled up, one was triging the other etc… so it was blinking before the 2nd oimage could opacity 0 to 100, and egain and again.

https://v.usetapes.com/WthXhspEnN

On the plus side, now you know how to make things blink! :wink:

Now I brainfarted earlier, there is much simpler to do. One element, 2 backgrounds and a transition ALL (you can try tu fins hat transition you need exactly, better than using All)

Go back to see my example on my site, the second block is a single element with 2 bg

https://v.usetapes.com/ThiYtdrRC8

Haha… ok I’ll check out your video. Thanks for taking the time to check this out!

You’re very welcome.

Ok you just made my day! LITERALLY! :smiley:

Using the background image on the hover state in a single image is a lot cleaner.

1 Like

Well I wasn’t sure you could transition from one to another… by putting “All”, it worked, so be it. But you should really find the exact property for transition. Using “All” is dirty. Maybe it’s “Background Position” ? Because it’s not Opacity anyway…

Vincent,

In your video you appear to click and drag the right menu with your mouse to make it scroll. Is that what I am witnessing, or are my eyes deceiving me? How do you do that?

Christopher

Can you point me to the time in the video where I seem to do that? I don’t see what you’re talking about…

Oh, I see.

Okay so I use a Wacom tablet or a trackpad. With each, it’s possible to make the menu scroll.

Wacom has a special gesture + click to do that.
Trackpad: 2 fingers gesture for scrolling in the menu

With your mouse, I guess, you can do the same with the mouse wheel. Basically, the same as when you scroll a web page.

The gesture on Wacom make it so you do the same as if you where on a tablet, click on a spot and drag up or down.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.