jQuery Plugin For Animated jQuery Mouse Hover Effects - slickhover

jQuery Plugin For Animated jQuery Mouse Hover Effects - slickhover
File Size: 63.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.