Press "Enter" to skip to content

A Vanilla JS Library to Show Preview Images on Hover

Hover Preview is the vanilla js library to display preview images upon hover. This JavaScript library automatically switches between a batch of images when you hover over the original set, just like a slide show.

Vue Component That Provides Drag and Drops Images Upload With Preview

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

Official Website(AviKKi): Click Here

This superior jQuery/javascript plugin is developed by AviKKi. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.