Hi guys, I’m going to share some interesting tip to add a nice hover effect on images with simple jquery code.

Image hover effect using jquery

Jquery Code

$(document).ready(function(){
    $('.hover-item').live('hover', function(e) {
		if( e.type == 'mouseenter' )
			$(this).stop().animate({opacity:0.3},400);

		if( e.type == 'mouseleave' )
			$(this).stop().animate({opacity:1},400);
     });
});

Usage

<img src="65.gif." class="hover-item" /> 
[button type=”download” url=”http://w3lessons.info/demo/jquery-image-hover-effect.html” color=”orange” align=”after”]View Demo[/button]

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

Related Posts