本文主要包含CSS图片放大,CSS点击图片放大,CSS图片点击放大等相关知识,佚名 希望在学习及工作中可以帮助到您
本文实例为大家分享了纯CSS实现图片点击放大带关闭按钮的图片特效代码，效果非常棒，供大家参考，具体内容如下
源码下载、演示
实现代码：
CSS代码：
- <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; }