Auto Swap Images On Hover – Hover Preview

Preview:

Description:

Hover Preview is a tiny JavaScript library that automatically switches between a group of images when hovering over the original one, just like a slideshow.

How to use it:

1. Insert the minified version of the Hover Preview library into the HTML page.

<script src="./dist/hover-preview.min.js"></script>

2. Add the CSS class to the image:

<img
  width="150px"
  height="150px"
  class="hover-preview"
  src="1.jpg"
/>

3. Define a group of images separated by “|” in the data-preview attribute. That’s it.

<img
  width="150px"
  height="150px"
  class="hover-preview"
  src="1.jpg"
  data-preview="2.jpg|3.jpg|4.jpg"
/>

Changelog:

02/05/2021

• PrefetchImage: use promises instead of callbacks

01/23/2021

• Avoid to add mouseleave event many times