CSS图像在悬停时无法缩放

Question

我已经制作了一个响应式图像网格，并正在尝试向其添加悬停效果，以使图像具有深色的覆盖层，并且一些文本会淡入淡出。但是，我一直很难实施它。

这是我的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);
}

但是，将鼠标悬停在图像上时，它没有预期的行为。

怎么了？

Answer 1

这里是一个jsFiddle，我认为它将帮助您解决问题：https://jsfiddle.net/mcs3yn1x/

HTML

<div class="tile">
 <img src="https://picsum.photos/200/300" class="animate">
 <div class="overlay">
 <p>Mahatma Gandhi</p>
</div>

CSS

.tile {
  border: 2px solid black;
}

.tile:hover img {
  transform: scale(1.2);
}