How can i make an image to change to another when i scroll the page or hover over it?

Design help General
1

i tried making a container with a bg image and i put an image inside which i give a scroll interaction so it will be 0% once i scroll down. the preview looks good but then when i publish its not working how come?

2

Hi @Tal_Shpon, Could you please update your post with some more information so we can help you faster? Things like your read-only link, and screenshots of the elements in question really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:
Cheers,
Dave

3

here is a read only link:
https://preview.webflow.com/preview/illusivenetworks4081101?preview=d9162c599b82822d31dfd2e195000c8a

i want to make the round icons change color when hovering over them (replace one png with another) how can i do that?

4

You can use jquery for that… even JS can handle that.

Or…
Setup 2 images… both absolute position in a div.

On mouseOver of #1… hide #1 - show #2.
On mouseOver of #2… hide #2 - show #1.

In looking closer… you could probably continue doing what you are doing (with the scroll)
but add a fade-in.

5

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

See also Change An Image's Image On Hover (without interactions)