Follow code very useful. mouse over the images, show cover as light color( according change color in css) and also given text link.
Download This image "googleimg.jpg"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>On Mouse over show cover using css</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.overlap { position:relative; -moz-box-sizing: border-box; box-sizing:border-box; -webkit-order-sizing:border-box; margin: 1.5px; width:22%; }
.overlap .innershadow { z-index: 50; width:100%; height:3px; position:absolute; top:0px; left:0px; -webkit-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); }
.overlap .cover { width:100%; height:100%; position:absolute; top:0px; left:0px; background: #000; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; -webkit-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); }
.overlap .link { cursor:pointer; position:absolute; left:50%; top:49%; background: rgba(0, 0, 0, 0.25) url(link.png) no-repeat; width:40px; height:40px; margin-left:-20px; -webkit-transition: all 0.15s; -moz-transition: all 0.15s; -o-transition: all 0.15s; -ms-transition: all 0.15s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
.overlap .show { cursor:pointer; position:absolute; right:50%; top:49%; background: rgba(0, 0, 0, 0.25) url(zoom.png) no-repeat; width:40px; height:40px; margin-right:-20px; -webkit-transition: all 0.15s; -moz-transition: all 0.15s; -o-transition: all 0.15s; -ms-transition: all 0.15s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
.overlap .itemtitle { bottom:51%; cursor:pointer; text-transform:uppercase; position:absolute; width: 100%; text-align: center; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; margin-left: 0px; }
.overlap .itemtitle a { color: #fff; font-weight: 800; font-size: 15px; }
.overlap .itemcategories { float: left; color: #aaa; font-weight: 400; font-size: 12px; text-transform:uppercase; cursor:pointer; width: 100%; text-align: center; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; margin-top: 6px; }
.overlap .itemcategories a { color: #aaa; font-weight: 400; font-size: 12px; }
.mr .overlap, .ml .overlap { margin: 0; }
.link.notalone { left:50%; margin-left:-45px;}
.show.notalone { right:50%; margin-right:-45px;}
.overlap:hover .link, .overlap:hover .show, .overlap:hover .itemtitle, .overlap:hover .itemcategories { -moz-opacity:1.0; filter:alpha(opacity=100); opacity:1; }
.overlap:hover .cover { -moz-opacity:0.75; filter:alpha(opacity=75); opacity:0.75;}
.overlap .link:hover { background: rgba(255, 255, 255, 0.1) url(link.png) no-repeat; }
.overlap .show:hover { background: rgba(255, 255, 255, 0.1) url(zoom.png) no-repeat; }
</style>
</HEAD>
<BODY>
<div class="overlap"><div class="innershadow"></div> <img alt="" src="googleimg.jpg" width="250px" height="160px"><div class="cover"></div> <a href="https://news.google.com/"><div class="link ">Google News</div></a><h5 class="itemtitle"><a href="https://www.google.co.in/maps/preview?hl=en&source=newuser-ws">Google Map</a><span class="itemcategories"><a rel="tag" href="https://images.google.com/">Search Google Image</a></span></h5></div>
</BODY>
</HTML>
Download This image "googleimg.jpg"
<HTML>
<HEAD>
<TITLE>On Mouse over show cover using css</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.overlap { position:relative; -moz-box-sizing: border-box; box-sizing:border-box; -webkit-order-sizing:border-box; margin: 1.5px; width:22%; }
.overlap .innershadow { z-index: 50; width:100%; height:3px; position:absolute; top:0px; left:0px; -webkit-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); }
.overlap .cover { width:100%; height:100%; position:absolute; top:0px; left:0px; background: #000; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; -webkit-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); }
.overlap .link { cursor:pointer; position:absolute; left:50%; top:49%; background: rgba(0, 0, 0, 0.25) url(link.png) no-repeat; width:40px; height:40px; margin-left:-20px; -webkit-transition: all 0.15s; -moz-transition: all 0.15s; -o-transition: all 0.15s; -ms-transition: all 0.15s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
.overlap .show { cursor:pointer; position:absolute; right:50%; top:49%; background: rgba(0, 0, 0, 0.25) url(zoom.png) no-repeat; width:40px; height:40px; margin-right:-20px; -webkit-transition: all 0.15s; -moz-transition: all 0.15s; -o-transition: all 0.15s; -ms-transition: all 0.15s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
.overlap .itemtitle { bottom:51%; cursor:pointer; text-transform:uppercase; position:absolute; width: 100%; text-align: center; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; margin-left: 0px; }
.overlap .itemtitle a { color: #fff; font-weight: 800; font-size: 15px; }
.overlap .itemcategories { float: left; color: #aaa; font-weight: 400; font-size: 12px; text-transform:uppercase; cursor:pointer; width: 100%; text-align: center; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; margin-top: 6px; }
.overlap .itemcategories a { color: #aaa; font-weight: 400; font-size: 12px; }
.mr .overlap, .ml .overlap { margin: 0; }
.link.notalone { left:50%; margin-left:-45px;}
.show.notalone { right:50%; margin-right:-45px;}
.overlap:hover .link, .overlap:hover .show, .overlap:hover .itemtitle, .overlap:hover .itemcategories { -moz-opacity:1.0; filter:alpha(opacity=100); opacity:1; }
.overlap:hover .cover { -moz-opacity:0.75; filter:alpha(opacity=75); opacity:0.75;}
.overlap .link:hover { background: rgba(255, 255, 255, 0.1) url(link.png) no-repeat; }
.overlap .show:hover { background: rgba(255, 255, 255, 0.1) url(zoom.png) no-repeat; }
</style>
</HEAD>
<BODY>
<div class="overlap"><div class="innershadow"></div> <img alt="" src="googleimg.jpg" width="250px" height="160px"><div class="cover"></div> <a href="https://news.google.com/"><div class="link ">Google News</div></a><h5 class="itemtitle"><a href="https://www.google.co.in/maps/preview?hl=en&source=newuser-ws">Google Map</a><span class="itemcategories"><a rel="tag" href="https://images.google.com/">Search Google Image</a></span></h5></div>
</BODY>
</HTML>
No comments:
Post a Comment