纯CSS实现产品图片点击放大效果
在本文中，我们分享了纯CSS的图像效果代码，以实现图像点击和缩放按钮的关闭按钮。效果很好，供大家参考，具体内容如下。源代码下载，演示
实现代码：
CSS代码：
CSS代码将内容复制到剪贴板。
产品{宽度：320px；身高：150px；边框1px solid # DDD；保证金：0汽车；padding: 10px；}
。productinfo {宽度：150px；浮动：左；}
。productmfr {字体：大胆16px / 18px Arial，sans-serif；颜色：# C00；填充：0；保证金：0；}
。产品类型{字体：大胆14px / 18px Arial，sans-serif；颜色：# 000；padding: 0；保证金：0；}
特点：10px填充。{ 0；保证金：0；列表样式：无；}
.features Li {font:normal 12px/16px Arial, sans-serif; color:#555;}
。价格{字体：大胆14px / 18px Arial，sans-serif；颜色：# 00c；填充物：0 0 10px 0；保证金：0；}
a.clickbox，a.clickbox：参观，a.clickbox：悬停{文字装饰：无；文本对齐：中心；}
a.clickbox img {显示：块；边界：0；}
a.clickbox B {显示：块；}
a.clickbox EM {字体：大胆10px / 12px Arial，sans-serif；颜色：# 000；}
a.clickbox {浮动：左；保证金：0 15px 15px 0；显示：内联；}
a.clickbox.lightbox {位置：绝对；左：- 9999px；顶部：- 10000px；光标：默认；Z指数：500；}
a.clickbox.light {位置：绝对；左：0；最高：0；宽度：100%；}
a.clickbox.box {位置：绝对；左：0；宽度：100%；文本对齐：中心；高度：300px；顶：30%；边缘上：- 150px；}
触发IE6 / * * /
A.clickbox：主动{方向：LTR；}
A.clickbox：active.lightbox {左：0；最高：0；宽度：100%；高度：100%；}
a.clickbox。灯箱：悬停，a.clickbox：focus.lightbox {位置：固定；左：0；最高：0；宽度：100%；高度：100%；}
a.clickbox。灯箱：hover.light，a.clickbox：active.lightbox.light，a.clickbox：focus.lightbox.light，{背景：# FFF；宽度：100%；背景：# FFF；（）；
不透明度：0.90；}
a.clickbox。灯箱：hover.box IMG，a.clickbox：active.lightbox.box IMG，a.clickbox：focus.lightbox.box.box，{ { } }。
a.clickbox。灯箱：hover.box跨度a.clickbox：活跃。灯箱，箱跨度，a.clickbox：focus.lightbox.box跨度{显示：块；宽度：560px；填充：0；保证金：10px汽车；文本对齐：中心；文字装饰：无；背景：# FFF边境；：1px solid # DDD；}
a.clickbox.lightbox.box span.title {字体：正常22px / 26px Verdana，sans-serif；颜色：# 069；}
a.clickbox.lightbox.box span.text {字体：正常11px / 16px Verdana，sans-serif；颜色：# 333；}
清除{左：}；}
a.clickbox我{显示：块；宽度：32px；身高：32px；位置：固定；错误：- 100px；最高：0；Z指数：500；}
a.clickbox。灯箱：萦绕我，a.clickbox：活跃的我，a.clickbox：焦点我{错误：50%；最高：30%；背景：URL（close2。PNG）；背景：URL；}。
#密切{显示：块；位置：固定；宽度：32px；身高：32px；错误：50%；最高：30%；右边距：- 295px；边距：- 165px；Z指数：1000；背景：URL（背景：URL）；}；}。
让IE6中心 / clickbox调节高度，覆盖整个页面。
A.clickbox：active.lightbox {左：50%；margin-left: - 2500px；身高：2000px；宽度：5000px；}
A.clickbox：active.lightbox.light {身高：2000px；}
a.clickbox我{显示：块；宽度：32px；身高：32px；溢出：隐藏；浮动：错误；鼠标指针；位置：静态；背景：URL（接近。PNG）；}
#密切{缘右：0；边缘上：0；Z指数：1000；背景：URL（反.gif）；鼠标指针；}
a.clickbox。灯箱：萦绕我，
A.clickbox：我{错误：32px；顶部：32px；背景：URL（接近。PNG）；右边距：0；边缘上：0；背景：URL（接近。PNG）；}
a.clickbox.frame {宽度：500px；身高：300px；背景：# FFF；边框1px solid # 000；padding: 10px；}
a.clickbox.box {顶：5%；边缘上：0；}
HTM代码：
xml代码将内容复制到剪贴板。
大形象公牛；
这是你的愿景-让它计数
与EOS 500D，你的故事都是活着的。
佳能 EOS 500D
数码单反相机
公牛；15.1 MP CMOS传感器
全高清（1080p）电影
470美元
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。