Since this is troublesome to set up via interactions or otherwise (hide the top element of two different elements “absolute” positioned on top of each other), we are going to use a small piece of reusable code that will enable this functionality only on image element(s) on your site.
Step 1:
Paste this in Site Settings > Custom Code > Footer Code. Save changes.
<script>
Webflow.push(function() {
// Hover image change
$('img[data-hover-image]').hover(function() {
var el = $(this); el.attr('data-hover-original-image', el.attr('src')).attr('src', el.attr('data-hover-image'));
}, function() {
var el = $(this); el.attr('src', el.attr('data-hover-original-image'));
});
});
</script>
Step 2:
For each image element you want this on, add a custom property Name data-hover-image with the Value to be the hover image URL.
Step 3:
As simple as that. Publish and enjoy.
Caveats:
The code above only replaces IMAGES. If you want to replace more complex content like HTML content like nested divs, etc, you might be better off using interactions.
You can’t replace custom attributes on elements from the Editor, and you need to change this from the Designer view.
Most of the time that custom code fails, is due to implementation. You can see from the demo that it works.
Please share you project’s read only link, the page and location where you are trying to implement this code. Then you may be able to get assistance getting this working on your project.
This script didn’t work for me either, but I did find a work around that worked for me in case it’s helpful for others.
I used grid and positioned the two images in the same place. i added a class to one “front” and class to the one behind “back” then i made it so on click (or optionally on hover) it makes the top image disappear and on click reappear.
really happy with how it came out. here it is live on our site: Reflection.app
I used it to have static images that disappear to show a gif animation behind it.
@daverad looks nice! i’d recommend to change the pointer on hover. So when someone hovers over the image, it changes. That way it’s clear to people something’s going to happen .
Also, love the Holstee products
Great idea @sarahfrison ! I didn’t even know that was possible and it was so easy to implement – just published. And thank you for the kind words about Holstee!!
.
. Glad it helped