HTML/CSS 用悬停效果在网格中对齐图像

Question

我制作了一个图像网格，并通过 CSS 我将它们全部居中对齐，在网格中彼此靠近。一旦我通过将鼠标悬停在上方来添加悬停以进行缩放，图像就不再对齐，而是一个在另一个下方。 HTML代码是这样的：

.section-wrap img:hover {
      width: 120px; 
      height: 120px;
      margin: 0;
    }

    .section-wrap img {
      display: block;
      border: 0; 
    }

    .section-wrap {
      padding: 120px 0;
      position: relative;
      background-size: cover;
      background-position: center;
    }

<section class="section-wrap bg-dark-overlay" style="background-image: url(img/background_abstract_test.png);">
  <div class="container" id="brands">
    <div class="title-row text-center">
      <p class="subtitle">Unsere Top Marken</p>
      <br>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
    </div> <!-- end slider -->
  </div>
</section>

我也试过把悬停效果写在一个新的class里，单独回忆一下，还是不行。有什么想法吗？

Answer 1

我认为悬停效果不能覆盖内联宽度 - 高度属性。将默认样式移动到 css 文件可能会解决这个问题。

.section-wrap img {
  width: 100px; 
  height: 100px;
  margin: 0;
}

.section-wrap img:hover {
  width: 120px; 
  height: 120px;
  margin: 0;
}

.section-wrap img {
  display: block;
  border: 0; 
}

.section-wrap {
  padding: 120px 0;
  position: relative;
  background-size: cover;
  background-position: center;
}

<section class="section-wrap bg-dark-overlay">
    <div class="container" id="brands">
        <div class="title-row text-center">
            <p class="subtitle">Unsere Top Marken</p>
            <br>
            <a href="link" target="_blank"><img src="img" /></a>
            <a href="link" target="_blank"><img src="img" /></a>
            <a href="link" target="_blank"><img src="img" /></a>
            <a href="link" target="_blank"><img src="img" /></a>
            <a href="link" target="_blank"><img src="img" /></a>
            <a href="link" target="_blank"><img src="img" /></a>
            <a href="link" target="_blank"><img src="img" /></a>
            <a href="link" target="_blank"><img src="img" /></a>
            <a href="link" target="_blank"><img src="img" /></a>
            <a href="link" target="_blank"><img src="img" /></a>
        </div> <!-- end slider -->
    </div>
</section>

Answer 2

您将图片设置为 display: block，这将强制它们在另一张下方可见。以下效果更好，但调整其中一个大小时的对齐方式不是最漂亮的：

.section-wrap img:hover {
      width: 120px; 
      height: 120px;
      margin: 0;
    }

    .section-wrap img {
      /* changed this: display: block; to: */
      display: inline-block;
      border: 0; 
    }

    .section-wrap {
      padding: 120px 0;
      position: relative;
      background-size: cover;
      background-position: center;
    }

<section class="section-wrap bg-dark-overlay" style="background-image: url(img/background_abstract_test.png);">
  <div class="container" id="brands">
    <div class="title-row text-center">
      <p class="subtitle">Unsere Top Marken</p>
      <br>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
      <a href="link" target="_blank"><img src="https://via.placeholder.com/150" width="100" height="100"></a>
    </div> <!-- end slider -->
  </div>
</section>

Answer 3

这是因为您将图像显示更改为块状。要修复它，您可以将显示更改为内联块：

.section-wrap img {
  display: inline-block;
  border: 0; 
}

为了使它们更靠近彼此，您可以将浮动设置为左侧，这有助于您将它们设置为彼此靠左。像这样：

.section-wrap img {
  display: inline-block;
  float: left;
  border: 0; 
}

HTML/CSS 用悬停效果在网格中对齐图像

HTML/CSS Align Images in a grid with hover effect

html

css

hover