Show Play, Link, Zoom Icon on Mouse over Thumbnail Image using jQuery & CSS

Here I am going to tell how to show a icon on mouse over thumbnail image using simple jQuery & CSS.

In my previous post, I had explained how to display product information on mouse over thumbnail - http://w3lessons.info/2013/04/03/display-product-information-on-a-hover-over-thumbnails-using-jquery/

Now a days most websites are using this trick. In this tutorial You are going to show a link icon on mouse over anchored thumbnail, showing play icon on mouse over video thumbnail & showing Zoom icon on gallery thumbnails.

jQuery Code

jQuery(window).load(function() {

                  var image_item=jQuery("a.image_effect");

                  image_item.each(function(){

                           var img_width = jQuery(this).find('img').width();
                           var img_height = jQuery(this).find('img').innerHeight();
                           var imageClass = jQuery(this).attr("class");
                           jQuery(this).prepend('<span class="imagemask '+imageClass+'"></span>');

                           var p = jQuery(this).find('img');
                           var position = p.position();
                           var PosTop= parseInt(p.css("margin-top"))+position.top;
                           var PosLeft= parseInt(p.css("margin-left"))+position.left;
			   			   if (!PosLeft) {PosLeft= position.left};

                           jQuery(this).find('.imagemask').css({top: PosTop});
			   	  jQuery(this).find('.imagemask').css({left: PosLeft});

                           jQuery('.imagemask', this).css({width:img_width,height:img_height,backgroundPosition:'center center'});
                           //for IE Browser
                           if(jQuery.browser.msie){ jQuery('.imagemask', this).css({display:'none'});}

                  });

         });

        var image_effect= jQuery("a.image_effect");
		//ignore the shadow effect if browser IE
		if(jQuery.browser.msie){

				image_effect.mouseover(function(){

				jQuery(this).find('.imagemask').stop().css({
						  display:"block", "z-index":"400"
						  });

				}).mouseout(function(){
					jQuery(this).find('.imagemask').stop().css({
						 display:"none","z-index":"0"
						} );
				});

		}else{
			//other browsers
			 image_effect.mouseover(function(){
			 jQuery(this).find('.imagemask').stop().animate({
					   display:"block",
					   opacity:1,
					   "z-index":"400"
					   }, 100);
			  jQuery(this).find('img').stop().animate({
					   opacity: 0.7
			}, 200);
			 }).mouseout(function(){
				 jQuery(this).find('.imagemask').stop().animate({
					   display:"none",
					   opacity:0,
					   "z-index":"0"
					 }, 100 );
				 jQuery(this).find('img').stop().animate({
					   opacity: 1
			}, 300);
			 });
		}

CSS Code

.alignright, img.alignright, a img.alignright {
	float:right;
	margin:10px 0px 10px 16px;
}
.alignleft, img.alignleft, a img.alignleft {
	float:left;
	margin:10px 16px 10px 0;
}
.aligncenter, img.aligncenter, a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto
}
.frame {
	border: 1px solid #F3F3F3;
	background: #Ffffff;
	box-shadow: 0 1px 3px rgba(202, 202, 202, 0.9);
	display:inline-block;
}
.frame img {
	background:#ffffff none repeat scroll 0 0;
	border:1px solid #fff;
	padding:8px;
	margin:0;
}

.imagemask {
	position:absolute;
	opacity:0;
	overflow:hidden;
}
.imagemask img {
	display: block !important;
	padding: 0 0 0 0 !important;
}
a.image_effect, a.image_effect:hover {
	text-decoration:none;
	cursor:pointer;
}
/* zoom icon */
.imagemask.zoom {
	background:url(zoom.png) center 30px no-repeat;
}
/* play icon */
		.imagemask.play {
	background:url(play.png) center 30px no-repeat;
}
/* play icon */
		.imagemask.link {
	background:url(link.png) center 30px no-repeat;
}

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedback’s are always welcome!

Thanks

View Live Demo & Download