Touch-enabled Image Hover Effects In jQuery - imghover

File Size: 19.1 KB
Views Total: 2104
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Touch-enabled Image Hover Effects In jQuery -  imghover

imghover is a tiny (~1.5kb minified) jQuery plugin that applies smooth zoom and grow effects to images when hovering over (desktop) or tapping and holding (mobile device).

See It In Action:

How to use it:

1. Load the minified version of the jQuery imghover plugin in the HTML page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/imghover.min.js"></script>

2. Apply default hover effects (zoom & grow) to your images.

<img src="/path/to/image.jpg" alt="hover me" />

3. Disable the zoom or grow hover effect.

  zoom: false

  grow: false

4. Customize the hover effects.

  growScale: 1.05,
  zoomScale: 1.1,

5. Apply rounded corners to the images. Default: false.

  radius: '0.5rem'

6. Determine whether to enable the hover effects on touch devices. Default: true.

  touch: false

7. Determine the size of the image. Default: false (auto resizing).

  size: {width: '400px', height: '300px'}

This awesome jQuery plugin is developed by taylordipentino. For more Advanced Usages, please check the demo page or visit the official website.