Smooth Image Hover Effects With jQuery - imageHover

This is just one of many image hover effects you can create using jQuery.

The imageHover jQuery plugin utilizes jQuery's animate() method to achieve an image hover effect that’s smooth, fast, reliable, and supported in all modern browsers.

It is great for when you want to highlight specific images in your design with an attractive transition.

How to use it:

1. Include the main script jquery.hoverEffect.js after loading the latest jQuery library.

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

2. Apply the plugin to the image container and set the opaticy & size the images should transition to.

<ul id="imageGallery">
  <li class="container">
    <img src="1.jpg" alt="Image 1" />
  </li>
  <li class="container">
    <img src="2.jpg" alt="Image 2" />
  </li>
  <li class="container">
    <img src="3.jpg" alt="Image 3" />
  </li>
  ...
</ul>

$("#imageGallery").imageHover({
  opacity: 1,
  height: '160px',
  width: '190px',
});

3. Customize the animation speed in ms. Default: 100.

$("#imageGallery").imageHover({
  opacity: 1,
  height: '160px',
  width: '190px',
  time: 2000,
});

---

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