html/css image overlap eachother

Question

i got one row working with four image but i wanted another row but it overlapp each other like this

this is what i want to achieve

index.html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<div class="main_image"></div>
<div class="image123">
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/light_bokeh_edit.jpg"/>
        <p>This is image 1</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/dancing.jpg"/>
        <p>This is image 2</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/applecloud.jpg"/>
        <p>This is image 3</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/chair.jpg">
        <p>This is image 4</p>
    </div>
</div>
<div class="image123">
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/light_bokeh_edit.jpg"/>
        <p>This is image 1</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/dancing.jpg"/>
        <p>This is image 2</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/applecloud.jpg"/>
        <p>This is image 3</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="Image/test_image_slot.jpg"/>
        <img class="top" src="Image/chair.jpg">
        <p>This is image 4</p>
    </div>
</div>
</body>

main.css

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #360836;
    text-align:center;
}

li {
    display:inline;
}

li a {
    display: inline-block;
    color: #d14977;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

li a:hover {
    color: white;
}

div.main_image { 
content:url(../Image/everest.jpg);
    max-width: 100%;
    height: auto;
    width: auto\9;
}

.imgContainer{
    float:left;
    width:25%;
    position:relative;
    margin:0 auto;

}

.imgContainer img{
    max-width:100%;
    height: auto;
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.imgContainer img.top:hover {
      opacity:0;
}

how can i make two rows or even more than two rows of image that stacks not overlap each other. I want to achieve this just using css and html and I dont want to use javascript or jquery. Thanks

what do you mean, "stacks"? different z-indexes? that'd qualify as "overlap"... — Marc B, Dec 10 '15 at 16:38
like one row with 4 img and another row with another 4 img without overlapping — WESTKINz, Dec 10 '15 at 16:40
what rules are applied to `.image123`? if that floats divs, then get rid of the float, or put a break/clear:both in between the two rows. — Marc B, Dec 10 '15 at 16:41
i haven't applied any rules to .image123 in css. i will try to break/clear see if that works — WESTKINz, Dec 10 '15 at 16:45

score 2 · Accepted Answer · edited May 23 '17 at 12:07

The problem here actually isn't due to the float on your .imgContainer, though the symptoms may be misleading at first.

The behaviour you're seeing is actually because you placed position:absolute on all of your .imgContainer img elements, which means they are taken out of the flow of the document and don't affect the height of their parents at all. (The reason why the containers aren't down to 0 height is because the <p> within each .imgContainer still takes space.) As a result, the images overlap each other because their parents are shorter than them.

What I would suggest is only applying position:absolute to the image that appears on top (rather than both top and bottom), and also applying position:absolute to the <p> so it can be positioned over top of the images (and won't end up between the image rows after the images are properly positioned).

So the CSS declaration blocks I would add/rewrite are:

.imgContainer img{
    /* position:absolute removed */
    display:block
    max-width:100%;
    height: auto;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.imgContainer img.top {
    position:absolute;
    left:0;
    top:0;
}

.imgContainer p {
    position: absolute;
    margin: 0;

    /* So the element doesn't block hover event of image */
    pointer-events: none;

    /* Vertical centering */
    top: 50%;
    transform: translateY(-50%);
}

Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.

EDIT: Vertical spacing between image rows was removed by applying display:block to the child images. Sourced from this StackOverflow question.

wow!! it works. There is only one problem, there is a tiny gap between two rows. apart for that it works!!! thanks — WESTKINz, Dec 10 '15 at 17:15
@WESTKINz Oh! Good point on that gap - let me see if I can fix that. — Serlite, Dec 10 '15 at 17:19
@MichaelBarreiro Heh, guess it's just a case of great minds thinking alike. =P — Serlite, Dec 10 '15 at 17:31
@WESTKINz By the way, I've edited my answer to address the problem you brought up. Let me know if that's good enough for your purposes! — Serlite, Dec 10 '15 at 17:36

score 1 · Answer 2 · answered Dec 10 '15 at 17:24

Im not exactly sure why your code is giving you that result, it might have something to do with giving your images a position of absolute. But I made a little snippet below that does what you want. Instead of using the img tags I just created a div that acts like the images container and gave that div a background image of the image. I find it always makes the code more simple. When you view the code, view it in full page so you can see it more clearly.

Hope this helps!

.imgContainer{
  width:100%;
  background-color: red;
  margin-left: 10px;
 }
.imgBOX{
  height:350px;
  width:350px;
  background-image: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/black-and-white-wallpaper-5.jpg);
  background-size: 100% 100%;
  display: inline-block;
  float: left;
 }
.imgBOX2{
  height:350px;
  width:350px;
  background-image: url(https://newevolutiondesigns.com/images/freebies/black-white-background-32.jpg);
  background-size: 100% 100%;
  display: inline-block;
  float: left;
 }

<div class='imgContainer'>
  <div class='imgBOX'></div>
  <div class='imgBOX'></div>
  <div class='imgBOX'></div>
  <div class='imgBOX'></div>
</div>
<div class='imgContainer'>
  <div class='imgBOX2'></div>
  <div class='imgBOX2'></div>
  <div class='imgBOX2'></div>
  <div class='imgBOX2'></div>
</div>

html/css image overlap eachother

2 Answers2