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" />

$(function(){
  $('img').imgHover();
});

3. Disable the zoom or grow hover effect.

$('img').imgHover({
  zoom: false
});

$('img').imgHover({
  grow: false
});

4. Customize the hover effects.

$('img').imgHover({
  growScale: 1.05,
  zoomScale: 1.1,
});

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

$('img').imgHover({
  radius: '0.5rem'
});

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

$('img').imgHover({
  touch: false
});

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

$('img').imgHover({
  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.