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

samliew · July 31, 2017, 3:22am

Demo:

temp

See it in action here: Image hover change (No interactions)

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.