Streaming live at 10am (PST)

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

Demo:

temp

See it in action here: http://sandbox-903b9c.webflow.io/image-hover-change

Description:

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.

Screenshot_2017-07-31_130743

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.


See also:

Change An Element's Text On Hover (without interactions)

Also, feel free to contact me for further code help and/or customization of third-party plugins

5 Likes

Sigh… I’ve been messing with image-replace in webflow for over an hour - finally found this fix and it doesn’t work.
: - (

It’s crazy that what was a simple dialog box in FRONTPAGE 2000, is such a train wreck on an elegant platform like Webflow!

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.

1 Like

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.

1 Like

@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 :slight_smile: .
Also, love the Holstee products :slight_smile:

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!!

@daverad you’re very welcome :slightly_smiling_face:. Glad it helped