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;

}

HTML Usage

<p><span class="frame alignleft"><a class="image_effect link" href="" ><img src="1.jpg" /></a></span></p>

<p><span class="frame alignleft"><a class="image_effect zoom" href="" ><img src="2.jpg" /></a></span></p>

<p><span class="frame alignleft"><a class="image_effect play" href="" ><img src="1.png" /></a></span></p>

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