我已经制作了一个响应式图像网格,并正在尝试向其添加悬停效果,以使图像具有深色的覆盖层,并且一些文本会淡出。但是,我一直很难实施它。
这是我的HTML结构。
<div class="tile">
<img src="some_image" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
这是我的CSS
.gallery .row .tile:hover ~ .tile img {
transform: scale(1.2);
}
但是,将鼠标悬停在图像上时,它没有预期的行为。
怎么了?
编辑 我有了悬浮效果,现在可以淡入文本了。
这是我的代码:
<div class="tile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tagore_Gandhi.jpg/220px-Tagore_Gandhi.jpg" class="animate">
<div class="overlay">
<div class="text">Mahatma Gandhi</div>
</div>
</div>
CSS
.tile {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0.8);
}
.tile:hover .overlay {
opacity: 1;
}
这似乎有效,但我认为它没有一定的“感觉”。因此,我需要在图像上添加缩放效果。我该怎么办