Auto Swap Images On Hover – Hover Preview

Category: Javascript , Slideshow | February 5, 2021
Author:AviKKi
Views Total:496 views
Official Page:Go to website
Last Update:February 5, 2021
License:MIT

Preview:

Auto Swap Images On Hover – Hover 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

You Might Be Interested In:


Leave a Reply