HTML标记:
<div class="item">
<a href="url">
<img src="photo.jpg" />
</a>
</div>
这个CSS在鼠标悬停时放大图片:
.item a img {
transition: all 0.2s linear;
}
.item a:hover img {
transform: scale(1.05);
}
这段 CSS 代码在鼠标悬停时添加了一个覆盖层:
.item a {
position: relative;
}
.item a:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: none no-repeat center center;
transition: all .3s linear;
}
.item a:hover:before {
background:rgba(0,0,0, 0.5) url('img/zoom.png') no-repeat center center;
}
每个效果单独使用都没有问题。但是,当我尝试同时使用这两个CSS时,只有缩放效果有效,叠加效果无法正常工作。
简单来说,我该如何编写CSS以结合这两个效果?
vertical-align:top
或display:inline-block
... 我只是添加了z-index:1
。谢谢! - Sparky