HTML 结构
<div id="small_gal">
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
</div>
图像有阴影,所以border
不是解决方案,因为它会在图像之外
边框有过渡,在 FF 上运行流畅,但在 chrome 或其他浏览器中运行不佳
这是我使用过的代码
#small_gal div:hover{cursor: pointer;}
#small_gal div:after {
content: '';
position: absolute;
width: 112px;
height: 81px;
border: 3px solid #e27501;
left: 9px; top: 9px;
z-index: 9;
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#small_gal div:hover:after {
opacity: 1;
}
Note:
#small_gal
只是容器
每个图像都包含在 div 中,因此我们可以实现 :after
Firefox 4+ 是唯一支持伪元素转换的浏览器,例如:before
and :after
.
Source: http://css-tricks.com/13555-transitions-and-animations-on-css- generated-content/ http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)