html - 如何将相同的效果放在多张图片上，而不放在我没有悬停的那张图片上？

好。所以我在一张桌子上有6张图像，每行3张，我有2行。我想对所有六个图像应用“增长”效果。所以我做到了，但是一切开始以一种不合时宜的方式移动其他所有东西。有什么想法我该怎么做吗？

CSS：

.raste img {
  height: 190px;
  width: 300px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.raste img:hover {
  width: 315px;
  height: 205px;
}

HTML：

<td>
  <li>
    <a href="project1.html">
      <div class="raste">
        <img src="log.jpg" alt="" width="300" />
      </div>
    </a>
  </li>
</td>

预先感谢您的所有答复。

最佳答案

您可以改用transform：

.raste img {
  height: 190px;
  width: 300px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.raste img:hover {
  -webkit-transform:scale(1.079);
          transform:scale(1.079); /*average value, set it to your needs */
}

关于html - 如何将相同的效果放在多张图片上，而不放在我没有悬停的那张图片上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35188983/