图像重叠 CSS

Question

离开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);
    }

    <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;
}

你正在编写的代码运行良好，如果你使用"边距顶部"图像不会相互重叠。

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>