HTML/CSS Align Images in a grid with hover effect

Question

I made a grid of images and through the CSS I aligned them all centered, close to each other in the grid. As soon as I go to add the hover to zoom by hovering the mouse over, the images are no longer aligned, but one below the other. The HTML code is like this:

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

question from:https://stackoverflow.com/questions/65898293/html-css-align-images-in-a-grid-with-hover-effect

Answer 1

You set your images to display: block, which will force them to be visible one below the other. The following works better, but the alignment when one of them is resized is not the prettiest:

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