CSS实现商品图片点击放大效果的方法-css教程-PHP中文网

首页

web前端

css教程

CSS实现商品图片点击放大效果的方法

高洛峰

Mar 08, 2017 pm 02:16 PM

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; }   
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>

htm代码：

<body>
<p class="product">
<a class="clickbox" href="#url">
<img src="eos500d-thumb.jpg" alt="" title="Click for larger image" />
<em>• large image •</em>
<b class="lightbox">
<b class="light">
</b> <b class="box">
<img src="eos500d.jpg" alt="" />
<span class="title">It&#39;s your vision - make it count</span>
<span class="text">With the EOS 500D, every side of your story comes alive.<br />
  <i></i>
</span>
</b>
</b>
</a>
  <p class="productInfo">
    <p class="productMfr">Canon EOS 500D</p>
    <p class="productType">Digital SLR Camera</p>
    <ul class="features">
      <li>• 15.1 MP CMOS sensor</li>
      <li>• Full HD (1080p) movies</li>
    </ul>
    <p class="price">£470</p>
    <img src="cart.gif" alt="Checkout" /> </p>
</p>
<p id="close"></p>
<br>
<br>

</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

以上是CSS实现商品图片点击放大效果的方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

构建多向布局Apr 12, 2025 am 10:15 AM

CSS中有一些新功能可以帮助我们轻松构建不同方向和语言的布局。本文是关于CSS的

CSS中的宽度/高度与宽度/高度HTML属性之间的差异是什么？Apr 12, 2025 am 10:13 AM

一些HTML元素接受宽度和高度作为属性。有些没有。这些属性有时被称为呈现属性。关于它们的问题是，他们被任何其他样式信息所覆盖。那

净冠军Apr 12, 2025 am 10:10 AM

我们今年再次在这里再次成为赞助商，这真是太棒了。大粉丝。我们自己的莎拉·德拉斯纳（Sarah Drasner）是DX（开发人员体验）负责人

高度爱Apr 12, 2025 am 10:09 AM

最近看到了很多高度动作。它是静态站点发电机世界中的一个较小的玩家，但我认为它具有巨大的潜力，因为如何

多脚步滑块：特定的两次案件Apr 12, 2025 am 10:07 AM

几年前，当Lea Verou在上面写了一篇文章时，这是我第一次出现的概念。自此，可悲的是从规格中删除了多范围滑块

通过用于Web组件的样式选项进行思考Apr 12, 2025 am 10:02 AM

您将样式放在网络组件中的位置？

了解异步等待Apr 12, 2025 am 09:55 AM

在为Web编写代码时，最终您需要做一些可能需要一些时间才能完成的过程。 JavaScript可以真正多任务，所以

最好的第三方组件Apr 12, 2025 am 09:54 AM

我是Web组件的粉丝。我认为这是几乎任何规模建立网站的非常好的方法（也许是绝对是最多的

See all articles

热AI工具

热工具

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中