[SOLVED] HTML CSS image grow

HTML CSS image grow

I want to add 6 images in an HTML form. I would like 3 in one row and the other 3 in the next row. the user brings the cursor on any of the images it should enlarge but should not disturb position of another 5 image I would also like the image to enlarge when the cursor is on any of the images. Also, the positions of the other 5 images shouldn't move when one of the images is enlarged.

Does anyone know how to do this with only HTML and CSS?

Solution

Here is a solution. I used CSS Grid to make 3 images in a row and the other 3 for the next row. However, you don't have to use this.

The trick I used to enlarge the image was scale();.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.image-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.5rem;
}
img:hover {
  transform: scale(1.2);
}

<div class="wrapper">
  <div class="image-container">
    <img src="https://placeimg.com/200/200/1" alt="1" />
    <img src="https://placeimg.com/200/200/2" alt="2" />
    <img src="https://placeimg.com/200/200/3" alt="3" />
    <img src="https://placeimg.com/200/200/4" alt="4" />
    <img src="https://placeimg.com/200/200/5" alt="5" />
    <img src="https://placeimg.com/200/200/6" alt="6" />
  </div>
</div>