Hoverstate change with images

Trying to do a hoverstate thing with exact same images but in different colors. To be exact, the social icon images, want them to go from the white color version icon into color of the social media color (facebook blue). Have made both the images (the white colored one, and the facebook colored one, made in photoshop, exact same sizes).

But when I change from none to hover state and change the image, it changes the base image.

Is there a way to do it, or can’t you do hover state with imaging?

Hi @Aimanisms, Can you please update your post with some more information so we can help you faster? Things like your read-only link, screenshots, and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

Thanks in advance! :slight_smile:

will not share my link via the forum!

Hi @Aimanisms, thanks for your patience. Per our support conversation, I did have a look at the case. The hover property will affect an elements css, but not the src property of the image widget. You cannot change the images like that in an image widget using hover. You can change the styles of the image, like the border, opacity etc, using hover, but not the source image.

One thing you can try, is to take a link block put that on your page, give it height and width to match your icons, then put the red icon as the background image for the link block. That is set using css. Then go to the hover state, and change the background image to the blue icon.

Then preview and see how it works :slight_smile: Can you try that, and if you have any questions, please let me know :slight_smile: Cheers, Dave

1 Like

Hi @Aimanisms, you don’t have to share your project. Instead, share a reduced test case so we can help you resolve the problem. Then you can apply the suggested resolution to your private project later.

Thanks in advance :slight_smile:

Hi @cyberdave.

I just want to make sure I understand you correctly. So if the image is rasterized/vector image I can change the background image of it and that would do the same? In case I didn’t understand, can you explain it maybe with an example.

Thanks for taking the time!

You can make it one image by pasting the 2 images below each other. then in webflow you need to align the image on normal to the top and for hover state align it to the bottom.

You can also add a third image and create a active state by doing this.
If you need any help with it let me know then i can pm you a site im using it one.

1 Like

How would I go about and make a reduced test case @thewonglv?

yes @Joscreative I would like to see how you do this, that sounds like what I mean.

@Aimanisms Its realy easy to create so made a shared site to see how it works feel free to dig into the designer and see it yourself how it works :smile:


I would like to know how to do this if you’re still available to help. Simply:

I need a social media icon to change color (become another image) on rollover, then revert back to the original when out of hover state

Thanks @Joscreative for the information, saved me a load of work!

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