CODEWITHSUNDEEP
htmlcss
CRW
CRW

Reputation: 11

Images Overlapping CSS

After being away from CSS for some time I'm trying to pick it back up. With that being said I'm working on a personal project and I can't seem to fix the images overlapping each other. I've looked for solutions for a while now and thought I'd finally ask the experts out there. Any help would be greatly appreciated. 

    .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>

Upvotes: 1

Views: 155

Answers (4)

midnightgamer
midnightgamer

Reputation: 454

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>

Upvotes: -1

Abdullah Al Noman
Abdullah Al Noman

Reputation: 33

Try this css code

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

The code you are writing works well , If you use "margin-top" the images are not overlapping each other.

Upvotes: -1

Leena Lavanya
Leena Lavanya

Reputation: 333

May I suggest setting the initial scale value to 1 and then scale it up / down on hover. Setting an initial 1.15 scale value doesn't re-position the images, hence they overlap.

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

Upvotes: 2

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

The images are overlapping because you are scaling them. CSS transform happens after the layout is done, so CSS transforms do not cause the images to lay themselves out again, thus they overlap.

To prevent the images from overlapping, just refrain from using the transform property to scale them.

Upvotes: 3

Related Questions