Tiny Animated Image Hover Effect Plugin with jQuery - hovereffect.js

hovereffect.js is a lightweight jQuery plugin that creates an animated overlay with a custom icon over your image on mouse hover.

Basic usage:

1. Include the jQuery hovereffect.js plugin after you've added jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/hovereffect.js"></script>

2. Wrap your image and a custom overlay icon into a container like this.

<div class="example">
  <img src="1.jpg" alt="Your Image">
  <a href=""><img src="icon.png" alt="icon"></a>
</div>

3. Call the function to slide out an overlay when you hover over the image.

$(".example").hovereffect();

4. Tweak the CSS styles as displayed below as per your need.

.overlay {
  background-color: #000;
  ...
}   

5. Plugin's default options.

$(".example").hovereffect({

  // css class for the overlay
  overlayClass: "overlay",

  // background color of the overlay
  background_color: "#000",

  // font color
  font_color: "#fff",

  // animaton duration in ms
  duration: 500,

  // overlay's opacity
  opacity: "0.5",

  // e.g. ['left', 'bottomRight']
  slidePath: ['', ''],

  //  CSS classes
  wrapper_class: 'wrapper',
  hover_class: 'hover',
  base_class: 'base',

  // width & height
  contentWidth: "0px",
  contentHeight: "0px",
  overlayWidth: "0px",
  overlayHeight: "0px",

  // z-index property
  zindex: 2,

  // onShow callback
  onshow: function(){}
  
});   

Change log:

2016-04-01

• Set defaults for heights and widths of element and overlay to 0px.

2016-01-28

• Added font_color as a property.

2016-01-27

• Added fade effect.

2016-01-08

• Refactored all of the code. Changed functionality of the slide effect to feature a path option.

2016-01-06

• Added a slideDiagonalUpRight option.

---

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