HTML CSS图像增长

Question

我想在HTML表单中添加6个图像。我想在一行中添加3个，在下一行中再添加3个。用户将光标放在它应该放大但不应该干扰另一个5图像的位置的任何图像上当光标位于任何图像上时，我也希望图像放大。此外，当放大其中一个图像时，其他5个图像的位置不应该移动。

有人知道如何只用HTML和CSS来做到这一点吗？

Answer 1

我为您提供了一个使用javascript和css网格的解决方案。

window.onload = function () {
let img_show = document.querySelectorAll(".container_img");
img_show.forEach(function (img_show_current) {
img_show_current.onclick = function () {
this.classList.toggle("img_show");
};
});
};

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
position: relative;
}
.container_img img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: transform 0.5s;
}
.container_img img:hover {
transform: scale(1.1);
}
.container_img.img_show {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

<div class="container">
<div class="container_img">
<img src="https://w-dog.ru/wallpapers/10/7/477636637359519.jpg" />
</div>
<div class="container_img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcajj6p3VxDPOtGGNOd_7BwzcpO36o6rW34Q&usqp=CAU" />
</div>
<div class="container_img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpAlH_q4oDlCu94hdmbMb9cmIRzpA-jsW_CQ&usqp=CAU" />
</div>
<div class="container_img">
<img src="https://static9.depositphotos.com/1594308/1110/i/600/depositphotos_11107478-stock-photo-fantasy.jpg" />
</div>
<div class="container_img">
<img src="https://klv-oboi.kz/img/gallery/1/thumbs/thumb_l_11350.jpg" />
</div>
<div class="container_img">
<img src="https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" />
</div>
</div>

Answer 2

这里有一个解决方案。我使用CSS网格在一行中制作了3个图像，另3个用于下一行。但是，您不必使用此。

我用来放大图像的技巧是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>