时间戳

首页 > 解决方案 > CSS网格图像库中悬停时缩放的问题

html - CSS网格图像库中悬停时缩放的问题

问题描述

我正在制作一个 CSS 网格图片库。图像在悬停时放大，但问题是它正在放大其他图像。如何在网格内缩放它？

这是代码。html:

<div class="image-gallery">
    <a href="" class="img-1"></a>
    <a href="" class="img-2"></a>
    <a href="" class="img-3"></a>
    <a href="" class="img-4"></a>
    <a href="" class="img-5"></a>
    <a href="" class="img-6"></a>
</div>

CSS：

.image-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        'img-1 img-2 img-3 img-4'
        'img-1 img-5 img-5 img-6';
}

.image-gallery a {
    width: 100%;
    height: 15rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.img-1 {
    grid-area: img-1;
    background-image: url("../../../wp-content/uploads/2020/08/camera.jpg");
    min-height: 30rem;
}

....

.img-6 {
    grid-area: img-6;
    background-image: url("../../../wp-content/uploads/2020/08/accessories.jpg");
}

.img-1:hover, .img-2:hover, .img-3:hover, .img-4:hover, .img-5:hover, .img-6:hover {
    transform: scale(1.03);
}

谢谢您的帮助。

标签： htmlcss

解决方案

推荐阅读