首页 > 开发 > CSS > 正文

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

2024-07-11 08:32:45

字体：大中小

来源：转载

供稿：网友

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

源码下载、演示

实现代码：

CSS代码：

CSS Code复制内容到剪贴板

<style type="text/css"> .product { width:320px; height:150px; border:1px solid #ddd; margin:0 auto; padding:10px; }
.productInfo { width:150px; float:left; } .productMfr { font:bold 16px/18px arial, sans-serif; color:#c00; padding:0; margin:0; }
.productType { font:bold 14px/18px arial, sans-serif; color:#000; padding:0; margin:0; } .features { padding:10px 0; margin:0; list-style:none; }
.features li { font:normal 12px/16px arial, sans-serif; color:#555; } .price { font:bold 14px/18px arial, sans-serif; color:#00c; padding:0 0 10px 0; margin:0; }
a.clickbox, a.clickbox:visited, a.clickbox:hover { text-decoration:none; text-align:center; } a.clickbox img { display:block; border:0; }
a.clickbox b { display:block; } a.clickbox em { font:bold 10px/12px arial, sans-serif; color:#000; }
a.clickbox { float:left; margin:0 15px 15px 0; 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; }
/* 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: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 .box img, a.clickbox:active .lightbox .box img, a.clickbox:focus .lightbox .box img { border:1px solid #ddd; margin:0 auto; padding:30px; background:#fff; } a.clickbox .lightbox:hover .box span, a.clickbox:active .lightbox .box span, a.clickbox:focus .lightbox .box span { display:block; width:560px; padding:0; margin:10px auto; text-align:center; text-decoration:none; background:#fff; border:1px solid #ddd; }
a.clickbox .lightbox .box span.title { font:normal 22px/26px verdana, sans-serif; color:#069; } a.clickbox .lightbox .box span.text { font:normal 11px/16px verdana, sans-serif; color:#333; }
.clear { clear:left; } a.clickbox i { display:block; width:32px; height:32px; position:fixed; rightright:-100px; top: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:-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> <!--[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:-2500px; height:2000px; width:5000px;} a.clickbox:active .lightbox .light {height:2000px;}
a.clickbox i {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:hover i,
a.clickbox:active i {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:1px solid #000; padding:10px;} a.clickbox .box {top:5%; margin-top:0;}
</style>

上一篇：CSS3制作酷炫的三维相册效果

下一篇：使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注