Streaming live at 10am (PST)

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


#1

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


Change image on hover
Image Swap on mouseover
Swap image on hover - NEED HELP!
Hoverstate change with images
How can i make an image to change to another when i scroll the page or hover over it?
How to hover an image?
How to change an image after