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

【问题标题】：HTML/CSS Align Images in a grid with hover effectHTML/CSS 用悬停效果在网格中对齐图像
【发布时间】：2021-01-26 17:05:43
【问题描述】：

我制作了一个图像网格，并通过 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>

我也尝试在新类中编写悬停效果并单独调用它，但没有。有什么想法吗？

【问题讨论】：

标签： html css hover

【解决方案1】：

您将图像设置为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>

【讨论】：

我注意到效果不是最好的。你有什么建议可以修复它或更好的效果吗？ @casraf

【解决方案2】：

我认为悬停效果不能覆盖内联宽度 - 高度属性。将默认样式移动到 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>

【讨论】：

【解决方案3】：

这是因为您将图像显示更改为阻止。要修复它，您可以将显示更改为 inline-block：

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

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

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

【讨论】：