Question

离开CSS一段时间后，我尝试将其备份。话虽这么说，我正在一个个人项目上，我似乎无法修复彼此重叠的图像。我已经寻找解决方案已有一段时间了，以为我最终会问那里的专家。任何帮助将不胜感激。

CSS

.work-pics {

    padding: 0;
    background-color: #000;
    overflow: hidden;
}

.work-pics img {

    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    background-color: #000;
    opacity: 0.7;
    transform: scale(1.15);
    transition: transform 0.5s, opacity 0.5s;
    background-color: #000;
}

.work-pics img:hover {

    opacity: 1;
    transform: scale(1.03);
}

HTML

<section>

            <div class="row">
                <div class="work-pics">
                    <div class="col span-1-of-3">
                        <a href="#"><img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables"></a>
                    </div>
                    <div class="col span-1-of-3">
                        <a href="#"><img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables"></a>
                    </div>
                    <div class="col span-1-of-3">
                        <a href="#"><img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables"></a>
                    </div>
                </div>
                <div class="work-pics">
                    <div class="col span-1-of-3">
                        <a href="#"><img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables"></a>
                    </div>
                    <div class="col span-1-of-3">
                        <a href="#"><img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables"></a>
                    </div>
                    <div class="col span-1-of-3">
                        <a href="#"><img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables"></a>
                    </div>
                </div>
            </div>
        </section>

Answer 1

图像重叠，因为您正在缩放它们。 CSS transform是在布局完成后发生的，因此CSS转换不会导致图像再次布局，因此它们会重叠。

为防止图像重叠，请避免使用transform属性缩放图像。

Answer 2

我可以建议将初始比例值设置为1，然后在悬停时将其放大/缩小。设置初始的1.15比例值不会重新定位图像，因此它们会重叠。

.work-pics img {
    transform: scale(1);
}

Answer 3

尝试此CSS代码

work-pics img {

display: block;
width: 100%;
height: auto;
margin: 0;
margin-top: 90px;
overflow: hidden;
background-color: #000;
opacity: 0.7;
transform: scale(1.15);
transition: transform 0.5s, opacity 0.5s;
background-color: #000;
}

您正在编写的代码效果很好，如果使用“ margin-top”，则图像不会相互重叠。

Answer 4

CSS

.work-pics{
  position:relative;
  background:#000;
  width:800px;
  margin:0 auto;
  
}

img{
  position:absolute;
 
}

.img-1{
  position:absolute;
  left:250px;
  top:80px;
}

.img-2{
    position:absolute;
  left:10px;
  top:80px;
}

.img-3{
    position:absolute;
  left:100px;
  top:10px;
}

.work-pics img:hover{
  z-index:999;
}

**HTML**

<section>

            <div class="row">
                <div class="work-pics">
                    <div class="col span-1-of-3 img-1">
                        <a href="#"><img src="http://lorempixel.com/g/400/200/" alt="Korean bibimbap with egg and vegetables"></a>
                  </div>
                    <div class="col span-1-of-3 img-2">
                        <a href="#"><img src="http://lorempixel.com/g/400/201/" alt="Korean bibimbap with egg and vegetables"></a>
                    </div>
                    <div class="col span-1-of-3 img-3">
                        <a href="#"><img src="http://lorempixel.com/g/400/202/" alt="Korean bibimbap with egg and vegetables"></a>
                    </div>
                </div>
            </div>
        </section>

重叠CSS的图片

4 个答案: