jQuery Plugin For Animated jQuery Mouse Hover Effects - slickhover

slickhover is a simple, useful, cross-browser jQuery plugin that creates an animated overlay with a custom icon overlay on an Html element when hover over.

How to use it:

1. Insert an image where you would like to apply on a image hover effect.

<img src="images/demo.jpg" class="demo" alt="Demo" />

2. Include the latest JQuery library and jQuery slickhover plugin at the end of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.slickhover.js" type="text/javascript"></script>

3. Call the plugin on the image and you're done.

<script type="text/javascript">
$(window).load(function(){
$(".demo").slickhover({
icon:"images/slickhover/demo.png", 
animateIn:true
});
});
</script>

4. Optional settings to customize the hover effect.

<script type="text/javascript">
$(window).load(function(){
$(".demo").slickhover({
// animate the icon in on hover.
animateIn: false, 

// The path to the icon
icon: 'images/slickhover/zoom-white.png', 

// Hex value that changes the color of the overlay
color: '#000', 

// How opaque to make the image, 
// with 0 being completely opaque and 1 having no opacity.
opacity: 0.2, 

// The speed of the fade and animation transition.
speed: 400 
});
});
</script>

Change log:

2014-12-22

• Fix bug: If you have few items of a class, so this script add few parents with slickhoverWrapper to img tag.

---

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