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

发布时间：2023-01-03 04:02:54 来源：网络

.

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

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

源码下载、演示

实现代码：

CSS代码：

CSS Code复制内容到剪贴板

<styletype="text/css">
.product{width:320px;height:150px;border:1pxsolid#ddd;margin:0auto;padding:10px;}
.productInfo{width:150px;float:left;}
.productMfr{font:bold16px/18pxarial,sans-serif;color:#c00;padding:0;margin:0;}
.productType{font:bold14px/18pxarial,sans-serif;color:#000;padding:0;margin:0;}
.features{padding:10px0;margin:0;list-style:none;}
.featuresli{font:normal12px/16pxarial,sans-serif;color:#555;}
.price{font:bold14px/18pxarial,sans-serif;color:#00c;padding:0010px0;margin:0;}
a.clickbox,a.clickbox:visited,a.clickbox:hover{text-decoration:none;text-align:center;}
a.clickboximg{display:block;border:0;}
a.clickboxb{display:block;}
a.clickboxem{font:bold10px/12pxarial,sans-serif;color:#000;}
a.clickbox{float:left;margin:015px15px0;display:inline;}
a.clickbox.lightbox{position:absolute;left:-9999px;top:-10000px;cursor:default;z-index:500;}
a.clickbox.light{position:absolute;left:0;top:0;width:100%;}
a.clickbox.box{position:absolute;left:0;width:100%;text-align:center;height:300px;top:30%;margin-top:-150px;}
/*triggerforIE6*/
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:fixed;left:0;top:0;width:100%;height:100%;}
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);
opacity:0.90;}
a.clickbox.lightbox:hover.boximg,a.clickbox:active.lightbox.boximg,a.clickbox:focus.lightbox.boximg{border:1pxsolid#ddd;margin:0auto;padding:30px;background:#fff;}
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;}
a.clickbox.lightbox.boxspan.title{font:normal22px/26pxverdana,sans-serif;color:#069;}
a.clickbox.lightbox.boxspan.text{font:normal11px/16pxverdana,sans-serif;color:#333;}
.clear{clear:left;}
a.clickboxi{display:block;width:32px;height:32px;position:fixed;rightright:-100px;top:0;z-index:500;}
a.clickbox.lightbox:hoveri,a.clickbox:activei,a.clickbox:focusi{rightright:50%;top:30%;background:url(close2.png);margin-right:-295px;margin-top:-165px;}
#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;}
</style>
<!--[iflteIE6]>
<styletype="text/css">
/*togetIE6tocentertheClickbox-adjusttheheighttocoverthewholepage*/
a.clickbox:active.lightbox{left:50%;margin-left:-2500px;height:2000px;width:5000px;}
a.clickbox:active.lightbox.light{height:2000px;}
a.clickboxi{display:block;width:32px;height:32px;overflow:hidden;float:rightright;cursor:pointer;position:static;background:url(close.png);}
#close{margin-right:0;margin-top:0;z-index:1000;background:url(trans.gif);cursor:pointer;}
a.clickbox.lightbox:hoveri,
a.clickbox:activei{rightright:32px;top:32px;background:url(close.png);margin-right:0;margin-top:0;background:url(close.png);}
a.clickbox.frame{width:500px;height:300px;background:#fff;border:1pxsolid#000;padding:10px;}
a.clickbox.box{top:5%;margin-top:0;}
</style>