Image Hover Effect using Jquery

by
Post Views: 22

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

[sourcecode language=”html”]<img src="65.gif." class="hover-item" /> [/sourcecode] [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!

You May Also Like

Never Miss Any Web Tutorials, Guides, Tips and Free eBooks

Join Our Community Of 50,000+ Web Lovers and get a weekly newsletter in your inbox

 

I hate spam too. Unsubscribe at any time.

Leave a Comment