Streaming live at 10am (PST)

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




See it in action here:


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.

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'));

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.


  • 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

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