How to make use of it:

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

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

2. Add the CSS class to the picture:

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

3. Define a bunch of photos separated by “|” within the data-preview attribute.

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

Auto Swap Images On Hover, Hover Preview Plugin/Github

See Demo And Download