CODEWITHSUNDEEP
htmlcss
Rue Vitale
Rue Vitale

Reputation: 1891

How to implement a gallery in CSS

I have four images that are aligned side to side. Except the third image is below the second image. Both are aligned to the right of the first image. The fourth image is aligned to the right of the second and third image (which are stacked on top of each other).

See picture: http://www.gliffy.com/go/publish/9802269

How do I implement this in CSS?

I have the following code:

<div class="examples">
    <div class="example"><img src="examples/1.jpg" /></div>
    <div class="example"><img src="examples/2.jpg" /></div>
    <div class="example"><img src="examples/3.jpg" /></div>
    <div class="example"><img src="examples/4.jpg" /></div>
</div>

I want to do this automatically. No hacks using the HTML.

I got them aligned side by side, but I can't figure out how to align the second and third image so that the second image is on top of the third image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .examples {
            position: relative;
            display: block;
            box-sizing: border-box;
            height: 100vh;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .example {
            position: absolute;
            background-size: cover;
            background-repeat: no-repeat;
            width: 33.33%;
            cursor: pointer;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-position: 50% 50%;
        }
        .example:nth-child(1) {
            top: 0;
            left: 0;
            height: 100%;
            background-image: url(examples/1.jpg);
        }
        .example:nth-child(2) {
            top: 0;
            left: 33.33%;
            height: 50%;
            background-image: url('examples/2.jpg');
        }
        .example:nth-child(3) {
            top: 50%;
            left: 33.33%;
            height: 50%;
            background-image: url('examples/3.jpg');
        }

        .example:nth-child(4) {
            top: 0;
            left: 66.66%;
            height: 100%;
            background-image: url('examples/4.jpg');
        }
    </style>
</head>
<body>
<div class="examples">
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
</div>
</body>
</html>

Upvotes: 2

Views: 175

Answers (6)

damiano celent
damiano celent

Reputation: 709

I have done one without touching the html, and one where I added an extra wrapper for div 2 and 3. The one with the extra wrap is the better solution, esp if this must be responsive. 

.examples{display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
box-shadow:9px 12px 8px grey;
height:210px;width:50%;margin:10px auto;
}

Link to codepen

http://codepen.io/damianocel/pen/GoMXaB

Upvotes: 0

karmakula
karmakula

Reputation: 56

Since you are not accepting any of the previous answers, here is a plunk that i played with:

http://plnkr.co/edit/di1vBRu0pzzLDbWRtp2K?p=preview

CSS
.example img {
    width: 200px;
    height: 200px;
    display: block;
    float: left;
    border:1px solid;
}

.example2 img {
    width: 100px;
    height: 100px;
    display: block;
    border:1px solid;
}


.example3 img {
    width: 200px;
    height: 200px;
    position:absolute;
    top:8px;
    right:321px;
    border:1px solid;
}

HTML

<div class="examples">
    <div class="example"><img src="examples/1.jpg" /></div>
    <div class="example2"><img src="examples/2.jpg" /></div>
    <div class="example2"><img src="examples/3.jpg" /></div>
    <div class="example3"><img src="examples/4.jpg" /></div>
</div>

Upvotes: 0

Carol McKay
Carol McKay

Reputation: 2424

html

<div class="examples">
    <div class="example"><img src="examples/1.jpg" /></div>
    <div class="example"><img src="examples/2.jpg" /></div>
    <div class="example"><img src="examples/3.jpg" /></div>
    <div class="example"><img src="examples/4.jpg" /></div>
</div>

css

.examples {


display:flex;
  width:600px;
  border:1px solid Blue;
}

.example:nth-child(1),
.example:nth-child(4)
{
  flex:0 0 40%;
  background:Pink;
}

.example:nth-child(2),
.example:nth-child(3)
{
  flex:0 0 20%;
  background:cyan;
}

.example:nth-child(3)
{
  position:absolute;
  margin-top:120px;
  margin-left:-120px;
  width:120px;
}

.example img 
{
    width: 100%;
    height: auto;
    display: block;
}

Use http://autoprefixer.github.io/ for cross browser support.

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

In future it would be polite for you to provide the codepen

Upvotes: 1

Brett DeWoody
Brett DeWoody

Reputation: 62773

Here's a pure CSS solution. One caveat, you'll run into pixel rounding at some sizes, causing images to be off by a pixel or two at some viewport sizes. 

    .examples {
      position: relative;
      display: block;
      box-sizing: border-box;
    }
    .example {
        width: 25%;
        height: auto;
        position: absolute;
        margin: 0;
        padding: 0;
        display: inline-block;
        box-sizing: border-box;
    }
    .example img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
        padding: 0;
    }
    
    .example:nth-child(1) {
      position: relative;
    }
  
    .example:nth-child(3) {
      margin-top: 12.475%;
      margin-bottom:-50%;
    }
    
    .example:nth-child(4) {
      left: 50%;
    }
<div class="examples">
   <div class="example"><img src="http://placehold.it/400x400&text=Image1" /></div>
   <div class="example"><img src="http://placehold.it/400x200&text=Image2" /></div>
   <div class="example"><img src="http://placehold.it/400x200&text=Image3" /></div>
   <div class="example"><img src="http://placehold.it/400x400&text=Image4" /></div>
</div>

And a working jsFiddle

Upvotes: 1

Hawkeye
Hawkeye

Reputation: 377

I have found something that works. I don't know if I will work for your photos. Please tell me if it doesn't.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.example {
    width: 25%;
    float: left;
    margin: 0;
    padding: 0;
}
.example img {
    width: 100%;
    height: auto;
    display: block;
}

</style>
</head>
<body>
<div class="examples">
    <div class="example"><img src="examples/1.jpg" /></div>
    <div class="example">
        <div class="second"><img src="examples/2.jpg" /></div>
        <div class="third"><img src="examples/3.jpg" /></div>
    </div>
    <div class="example"><img src="examples/4.jpg" /></div>
</div>
</body>
</html>

Upvotes: 0

noobHere
noobHere

Reputation: 251

i think you should wrap the second and third image on a div with a float between the first and fourth image like this: 

<div class="examples">
  <div class="example"></div>
  <div class="wrap">
    <div class="example-half"></div>
    <div class="example-half"></div>
  </div>
  <div class="example"></div>
</div>

then the image on the wrap class has a display block on it 

.example {
  background:red;
  padding: 20px 20px;
}
.wrap, .example {
  float: left;
}
.example-half {
  background:blue;
  display: block;
  padding: 10px 10px;
}
.example, .example-half {
  width: 50px;
  margin: 0;
}

you can do the styling and etc. . hope this helps goodluck

i have created a simple fiddle here

Upvotes: 0

Related Questions