CSS 图片缩放属性？

Question

在我的网站上有一列带有悬停缩放效果的图片。当悬停在图像上时，它会增长到原始图像大小的 5 倍。但是，为了使悬停效果脱离，我必须将鼠标移出页面或放大图像上方。

例如，如果我有一张纵向照片，当我将鼠标悬停在它上面时它会缩放到 5 倍大小，如果不将鼠标移出网络浏览器或图片上方，我将无法让图像恢复到正常大小.由于这种效果，我无法减小图像的大小，因此无法在不将鼠标完全移出屏幕的情况下将鼠标悬停在其上方的图像上。

如何为悬停缩放创建一个效果区域，以便如果我的鼠标不再位于缩放后的图像上，它会恢复到原始大小？

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 1rem;
  border: 0.1rem solid black;
  max-width: 200px;
  max-height: 200px;
}

div.grow:hover {
  transform: scale(3);
}

<section id="images" class="image-gallery container">
  <div class="container-content">
    <h2>Image Gallery</h2>
    <div class="content">
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
    </div>
  </div>
</section>

Answer 1

好了：

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 1rem;
  border: 0.1rem solid black;
  max-width: 200px;
  max-height: 200px;
}

.grow:hover {
  transform: scale(3);
}

<section id="images" class="image-gallery container">
  <div class="container-content">
    <h2>Image Gallery</h2>
    <div class="content">
      <div>
        <img src="https://i.imgur.com/KEweiIz.jpg" class="grow">
      </div>
      <div>
        <img src="https://i.imgur.com/KEweiIz.jpg" class="grow">
      </div>
      <div>
        <img src="https://i.imgur.com/KEweiIz.jpg" class="grow">
      </div>
      <div>
        <img src="https://i.imgur.com/KEweiIz.jpg" class="grow">
      </div>
    </div>
  </div>
</section>

将 class="grow" 属性分配给 <img> 标签即可。而在 CSS 中，只需将 div.grow 更改为 .grow。

CSS 图片缩放属性？

CSS Image scaling properies?

html

css

scale

hover

mousehover