HTML CSS 图片增长

Question

我想在一个HTML表单中添加6张图片。我希望3张图片在一行，另外3张图片在下一行。当用户将鼠标悬停在任何一张图片上时，该图片应该放大，但不应干扰其他5张图片的位置。 同时，当鼠标悬停在任何一张图片上时，也希望该图片能够放大。此外，其他5张图片的位置不应在其中一张图片被放大时移动。

有人知道如何仅使用HTML和CSS实现这个功能吗？

- dhruv parmar

---

.grow { 过渡: 所有 .2秒 渐入渐出; } .grow:hover { 变换: 缩放(1.1); } - Siraj Alam

https://codepen.io/nxworld/pen/ZYNOBZ - Siraj Alam

请展示你所尝试的内容。参观一下并查看问题。 - ppwater

Answer 1

我用JavaScript和CSS Grid为您制作了一个解决方案。

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>

- s.kuznetsov

Answer 2

这里有一个解决方案。我使用CSS Grid将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>

- Scalper