Hover Preview

A vanilla js library to show preview images on hover, check a Demo here

Please watch :eyes: or star :star2: this repo if you like it.

Getting started

1. Grab the minified js code, from here.

2. Add hover-preview.min.js to bottom of your body tag, example -

   <script defer src='/js/hover-preview.min.js'></script>

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

   <img src="https://github.com/AviKKi/hover-preview/raw/main/poster.jpg" class="hover-preview" />

4. Add data-preview attribute with pipe(|) seperated preview image urls, example

   <img
    src="https://github.com/AviKKi/hover-preview/raw/main/poster.jpg"
    class="hover-preview"
    data-preview="preview1.jpg|preview2.jpg|preview3.jpg"
   />

Build minified bundle

$ yarn build