CSS图像在悬停时不缩放答案

【问题标题】：CSS Image not scaling on hoverCSS图像在悬停时不缩放
【发布时间】：2020-03-13 10:32:04
【问题描述】：

我已经制作了一个响应式图像网格，并正在尝试为其添加悬停效果，以便图像获得深色叠加层并且一些文本淡入其中。但是，我一直很难实现它。

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

.tile:hover .overlay {
  opacity: 1;
}

这似乎可行，但我认为它没有某种“感觉”。所以我需要为图像添加比例效果。我该怎么做呢

【问题讨论】：

是的，它有点工作，但整个图像按比例放大，我希望图像包含在某种容器 div 中，我不知道该怎么做。

标签： html css image hover overlay

【解决方案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);
}

编辑

在听到更多关于您的问题的信息后，我创建了以下 jsFiddle：https://jsfiddle.net/f1gzonjr/4/

HTML

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

CSS

.tile {
  position: relative;

  top: 0px;
  left: 0px;

  height: 300px;
  width: 200px;

  overflow: hidden;

  border: 2px solid black;
} 

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

.overlay{
 position: absolute;
 display: none;

 top: 0px;
 left: 0px;

 height: 100%;
 width: 100%;

 background-color: rgba(0,0,0,0.5);
}

.overlay p {
 position: relative;
 text-align: center;

 color: #fff;
}

.tile:hover .overlay{
 display: block;
}

【讨论】：

是的，它有点工作，但整个图像按比例放大，我希望图像包含在某种容器 div 中，我不知道该怎么做。
这个答案很完美，但你看我改变了我的代码（我会更新它），我不能在我当前的解决方案中使用你的代码。对不起，我是菜鸟。

【解决方案2】：

这是另一种解决方案。不知道是不是你想要的。

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

这是我改编的原始答案：Change background color of child div on hover of parent div?

-----编辑-----

要阻止它缩放和破坏响应能力，您需要在图像周围添加一个容器，然后将溢出设置为无。

HTML：

<div class="tile">
    <div class="img-container"><img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/16C0E/production/_109089139_928b0174-4b3f-48ff-8366-d118afa1ed56.jpg" class="animate"></div>
    <div class="overlay">
    <p>Mahatma Gandhi</p>

CSS：

.img-container{
    width: 500px;
    height: 500px;
    overflow: hidden;
}
.tile:hover img, .tile.hover img {
    transform: scale(1.2);
}

请参阅下面的代码笔以获取示例 https://codepen.io/jamesCyrius/pen/pooqwwv

【讨论】：

【解决方案3】：

这是代码

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s; /* Animation */
  width: 15px;
  height: 15px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

&lt;div class="zoom"&gt;&lt;/div&gt;

【讨论】：