Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :

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.

Show play icon, zoom icon, link icon on mouse over

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

  • Facebook
  • Twitter
  • Google+
  • Linkedin