-
Posts
-
HI
My client is asking if it’s possible to have a gif change color on hover/click?
I know I can swap out images, but can a gif be swapped without the animation being reset to the beginning?
It’s a black and white gif and they want to change the white to orange, but an orange overlay doesn’t look right since it overlays the black and the black background as well. Do you know a way to do this?
thanks for your helpNancy
Hey Nancy,
Instead of switching images on hover, you can use custom CSS to display the image in grayscale and remove grayscale on hover.
To do that, you can upload the colored gif, edit the Image element, and give it a custom CSS class in Advanced > Developer Settings > Custom CSS Class field (“gs-img” in the example below), and add the following code to the Quick CSS field:
.gs-img img { filter: grayscale(100%); } .gs-img:hover img { filter: none; }I hope this works for you!
Best regards,
YigitHi Yigit,
Thanks for that info.
If I make a gif with orange instead of white in the image I linked below, will the grayscale setting give me a clean white?Hey Nancy,
No, it wouldn’t be clean white.
It looks like the gif doesn’t reset when you select the Fade to another image option ( https://i.imgur.com/yGqwdzB.png ) so this should work for you.
Best regards,
YigitHi Yigit
Thanks for the info – I didn’t know that was an option in the image element. Perfect.
best
Nancy
- The topic ‘gif with another gif on hover/rollover’ is closed to new replies.