Hover Preview

A vanilla js library to show preview images on hover.

Getting started

1. Add hover-preview.min.js to bottom of your body tag.

   <script defer src='https://raw.githubusercontent.com/AviKKi/hover-preview/main/dist/hover-preview.min.js'></script>

2. Add class hover-preview to img tag that should have preview behaviour.

   <img src="poster.jpg" class="hover-preview" />

3. Add data-preview attribute with | seperated preview image urls.

   <img
     src="poster.jpg"
     class="hover-preview"
     data-preview="preview1.jpg|preview2.jpg|preview3.jpg"
   />

Build minified bundle

$ yarn build

Running Demo

Check the Demo here