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

网络
一个人的人生注定要遇见两个人，一个人多年令人惊叹，另一个人温柔。学校没有纪律便如磨房里没有水。走自己的路，让别人说去吧！

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

源码下载、演示

实现代码：

CSS代码：

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. .product{width:320px;height:150px;border:1pxsolid#ddd;margin:0auto;padding:10px;}
  3. .productInfo{width:150px;float:left;}
  4. .productMfr{font:bold16px/18pxarial,sans-serif;color:#c00;padding:0;margin:0;}
  5. .productType{font:bold14px/18pxarial,sans-serif;color:#000;padding:0;margin:0;}
  6. .features{padding:10px0;margin:0;list-style:none;}
  7. .featuresli{font:normal12px/16pxarial,sans-serif;color:#555;}
  8. .price{font:bold14px/18pxarial,sans-serif;color:#00c;padding:0010px0;margin:0;}
  9. a.clickbox,a.clickbox:visited,a.clickbox:hover{text-decoration:none;text-align:center;}
  10. a.clickboximg{display:block;border:0;}
  11. a.clickboxb{display:block;}
  12. a.clickboxem{font:bold10px/12pxarial,sans-serif;color:#000;}
  13. a.clickbox{float:left;margin:015px15px0;display:inline;}
  14. a.clickbox.lightbox{position:absolute;left:-9999px;top:-10000px;cursor:default;z-index:500;}
  15. a.clickbox.light{position:absolute;left:0;top:0;width:100%;}
  16. a.clickbox.box{position:absolute;left:0;width:100%;text-align:center;height:300px;top:30%;margin-top:-150px;}
  17. /*triggerforIE6*/
  18. a.clickbox:active{direction:ltr;}
  19. a.clickbox:active.lightbox{left:0;top:0;width:100%;height:100%;}
  20. a.clickbox.lightbox:hover,a.clickbox:focus.lightbox{position:fixed;left:0;top:0;width:100%;height:100%;}
  21. a.clickbox.lightbox:hover.light,a.clickbox:active.lightbox.light,a.clickbox:focus.lightbox.light{background:#fff;width:100%;height:100%;filter:alpha(opacity=90);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
  22. opacity:0.90;}
  23. a.clickbox.lightbox:hover.boximg,a.clickbox:active.lightbox.boximg,a.clickbox:focus.lightbox.boximg{border:1pxsolid#ddd;margin:0auto;padding:30px;background:#fff;}
  24. a.clickbox.lightbox:hover.boxspan,a.clickbox:active.lightbox.boxspan,a.clickbox:focus.lightbox.boxspan{display:block;width:560px;padding:0;margin:10pxauto;text-align:center;text-decoration:none;background:#fff;border:1pxsolid#ddd;}
  25. a.clickbox.lightbox.boxspan.title{font:normal22px/26pxverdana,sans-serif;color:#069;}
  26. a.clickbox.lightbox.boxspan.text{font:normal11px/16pxverdana,sans-serif;color:#333;}
  27. .clear{clear:left;}
  28. a.clickboxi{display:block;width:32px;height:32px;position:fixed;rightright:-100px;top:0;z-index:500;}
  29. a.clickbox.lightbox:hoveri,a.clickbox:activei,a.clickbox:focusi{rightright:50%;top:30%;background:url(close2.png);margin-right:-295px;margin-top:-165px;}
  30. #close{display:block;position:fixed;width:32px;height:32px;rightright:50%;top:30%;margin-right:-295px;margin-top:-165px;z-index:1000;background:url(trans.gif);cursor:pointer;}
  31. </style>
  32. <!--[iflteIE6]>
  33. <styletype="text/css">
  34. /*togetIE6tocentertheClickbox-adjusttheheighttocoverthewholepage*/
  35. a.clickbox:active.lightbox{left:50%;margin-left:-2500px;height:2000px;width:5000px;}
  36. a.clickbox:active.lightbox.light{height:2000px;}
  37. a.clickboxi{display:block;width:32px;height:32px;overflow:hidden;float:rightright;cursor:pointer;position:static;background:url(close.png);}
  39. #close{margin-right:0;margin-top:0;z-index:1000;background:url(trans.gif);cursor:pointer;}
  40. a.clickbox.lightbox:hoveri,
  41. a.clickbox:activei{rightright:32px;top:32px;background:url(close.png);margin-right:0;margin-top:0;background:url(close.png);}
  43. a.clickbox.frame{width:500px;height:300px;background:#fff;border:1pxsolid#000;padding:10px;}
  44. a.clickbox.box{top:5%;margin-top:0;}
  45. </style>

htm代码：

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <divclass="product">
  3. <aclass="clickbox"rel="nofollow noopener noreferrer" href="#url">
  4. <imgsrc="eos500d-thumb.jpg"alt=""title="Clickforlargerimage"/>
  5. <em>•largeimage•</em>
  6. <bclass="lightbox">
  7. <bclass="light">
  8. </b><bclass="box">
  9. <imgsrc="eos500d.jpg"alt=""/>
  10. <spanclass="title">It'syourvision-makeitcount</span>
  11. <spanclass="text">WiththeEOS500D,everysideofyourstorycomesalive.<br/>
  12. <i></i>
  13. </span>
  14. </b>
  15. </b>
  16. </a>
  17. <divclass="productInfo">
  18. <pclass="productMfr">CanonEOS500D</p>
  19. <pclass="productType">DigitalSLRCamera</p>
  20. <ulclass="features">
  21. <li>•15.1MPCMOSsensor</li>
  22. <li>•FullHD(1080p)movies</li>
  23. </ul>
  24. <pclass="price">£470</p>
  25. <imgsrc="cart.gif"alt="Checkout"/></div>
  26. </div>
  27. <divid="close"></div>
  28. <br>
  29. <br>
  31. </body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例