HTML/CSS 使用 hover 效果在網格中對齊圖像

Question

我制作了一個圖像網格，並通過 CSS 將它們全部居中對齊，在網格中彼此靠近。 當我通過將鼠標懸停在 go 添加 hover 進行縮放時，圖像不再對齊，而是一個在另一個下方。 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 中編寫 hover 效果並單獨調用它，但沒有。 任何想法？

Answer 1

我在想 hover 效果不能覆蓋內聯寬度 - 高度屬性。 將默認 styles 移動到 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 ，這將強制它們在另一個下方可見。 以下效果更好，但 alignment 當其中一個被調整大小時並不是最漂亮的：

 .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; 
}