纯CSS实现商品图片点击放大效果

本文实例为大家分享了纯CSS实现图片点击放大带关闭按钮的图片特效代码,效果非常棒,供大家参考,具体内容如下

源码下载、演示

实现代码:

CSS代码:

CSS Code复制内容到剪贴板 <style type="text/css">    .product { width:320pxheight:150pxborder:1px solid #dddmargin:0 autopadding:10px; }    .productInfo { width:150pxfloat:left; }    .productMfr { font:bold 16px/18px arialsans-serifcolor:#c00padding:0; margin:0; }    .productType { font:bold 14px/18px arialsans-serifcolor:#000padding:0; margin:0; }    .features { padding:10px 0; margin:0; list-style:none; }    .features li { font:normal 12px/16px arialsans-serifcolor:#555; }    .price { font:bold 14px/18px arialsans-serifcolor:#00cpadding:0 0 10px 0; margin:0; }    a.clickbox, a.clickbox:visited, a.clickbox:hover { text-decoration:nonetext-align:center; }    a.clickbox img { display:blockborder:0; }    a.clickbox b { display:block; }    a.clickbox em { font:bold 10px/12px arialsans-serifcolor:#000; }    a.clickbox { float:leftmargin:0 15px 15px 0; display:inline; }    a.clickbox .lightbox { position:absoluteleft:-9999pxtop:-10000pxcursor:defaultz-index:500; }    a.clickbox .light { position:absoluteleft:0; top:0; width:100%; }    a.clickbox .box { position:absoluteleft:0; width:100%; text-align:centerheight:300pxtop:30%; margin-top:-150px; }    /* trigger for IE6 */   a.clickbox:active { direction:ltr; }    a.clickbox:active .lightbox { left:0; top:0; width:100%; height:100%; }    a.clickbox .lightbox:hover, a.clickbox:focus .lightbox { position:fixedleft:0; top:0; width:100%; height:100%; }    a.clickbox .lightbox:hover .light, a.clickbox:active .lightbox .light, a.clickbox:focus .lightbox .light { background:#fffwidth:100%; height:100%; filter: alpha(opacity=90);  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);    opacity:0.90; }    a.clickbox .lightbox:hover .box img, a.clickbox:active .lightbox .box img, a.clickbox:focus .lightbox .box img { border:1px solid #dddmargin:0 autopadding:30pxbackground:#fff; }    a.clickbox .lightbox:hover .box span, a.clickbox:active .lightbox .box span, a.clickbox:focus .lightbox .box span { display:blockwidth:560pxpadding:0; margin:10px autotext-align:centertext-decoration:nonebackground:#fffborder:1px solid #ddd; }    a.clickbox .lightbox .box span.title { font:normal 22px/26px verdanasans-serifcolor:#069; }    a.clickbox .lightbox .box span.text { font:normal 11px/16px verdanasans-serifcolor:#333; }    .clear { clear:left; }    a.clickbox i { display:blockwidth:32pxheight:32pxposition:fixedrightright:-100pxtop:0; z-index:500; }    a.clickbox .lightbox:hover i, a.clickbox:active i, a.clickbox:focus i { rightright:50%; top:30%; background:url(close2.png); margin-right:-295pxmargin-top:-165px; }    #close { display:blockposition:fixedwidth:32pxheight:32pxrightright:50%; top:30%; margin-right:-295pxmargin-top:-165pxz-index:1000; background:url(trans.gif); cursor:pointer; }    </style>    <!--[if lte IE 6]>    <style type="text/css">    /* to get IE6 to center the Clickbox - adjust the height to cover the whole page */   a.clickbox:active .lightbox {left:50%; margin-left:-2500pxheight:2000pxwidth:5000px;}    a.clickbox:active .lightbox .light {height:2000px;}    a.clickbox i {display:blockwidth:32pxheight:32pxoverflow:hiddenfloat:rightrightcursor:pointerposition:staticbackground:url(close.png);}       #close {margin-right:0; margin-top:0; z-index:1000; background:url(trans.gif); cursor:pointer;}    a.clickbox .lightbox:hover i,    a.clickbox:active i {rightright:32pxtop:32pxbackground:url(close.png); margin-right:0; margin-top:0;  background:url(close.png);}       a.clickbox .frame {width:500pxheight:300pxbackground:#fffborder:1px solid #000padding:10px;}    a.clickbox .box {top:5%; margin-top:0;}    </style>   

htm代码:

XML/HTML Code复制内容到剪贴板 <body>   <div class="product">     <a class="clickbox" href="#url">     <img src="eos500d-thumb.jpg" alt="" title="Click for larger image" />     <em>• large image •</em>     <b class="lightbox">     <b class="light">   </b> <b class="box">     <img src="eos500d.jpg" alt="" />     <span class="title">Its your vision - make it count</span>     <span class="text">With the EOS 500D, every side of your story comes alive.<br />     <i></i>   </span>     </b>     </b>     </a>     <div class="productInfo">       <p class="productMfr">Canon EOS 500D</p>       <p class="productType">Digital SLR Camera</p>       <ul class="features">         <li>• 15.1 MP CMOS sensor</li>         <li>• Full HD (1080p) movies</li>       </ul>       <p class="price">£470</p>       <img src="cart.gif" alt="Checkout" /> </div>   </div>   <div id="close"></div>   <br>   <br>      </body>     以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

纯CSS实现商品图片点击放大效果