Auto Swap Images On Hover – Hover Preview

Category: Javascript , Slideshow | October 29, 2020
Author:AviKKi
Views Total:131 views
Official Page:Go to website
Last Update:October 29, 2020
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"
/>

You Might Be Interested In:


Leave a Reply