html - 如何对多个图像施加相同的效果，但不影响我没有悬停的图像？

Question

好的。所以我在一个表中有 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>

提前感谢您的所有回答。

Answer 1

您可以改用转换:

.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 */
}