Gallery with effect stack of images

css imageWhen he began to spread on the main browser support for CSS3 transformations, many tutorials applied this new feature to the galleries, creating the effect that here we define 'stack of images': the base image in the foreground and behind it the levels that give the illusion of a group of overlapping photos.

Obtain the effect is relatively simple, all based on a judicious use of the content generated and, secondly, of the transformations. Let's see how to proceed.

[adsense:block:adcontenuto]

 

The basic technique

To realize the first demo and the other attached to this article as a starting point we used the tunnel created for the article A grid of images without float and tables.
 
The HTML markup is as follows:
 
<div id="container">
<ul id="grid">
   <li class="photo"><img src="es-1.jpg"></li>
   <li class="photo"><img src="es-2.jpg"></li>
   <li class="photo"><img src="es-3.jpg"></li>
   <li class="photo"><img src="es-4.jpg"></li>
   <li class="photo"><img src="es-5.jpg"></li>
   <li class="photo"><img src="es-6.jpg"></li>
   <li class="photo"><img src="es-7.jpg"></li>
   <li class="photo"><img src="es-8.jpg"></li>
</ul>
</div>

Without dwelling on the layout, go immediately to see the CSS necessary to achieve the effect stack. First, we set a number of properties for the class with them. Photos that the container element of the images:

 

.photo{
  width160px;
  height: 160px;
  margin: 20px;
  position: relative;
  z-index: 10;
}

 

Width and height match the image. The margin is used to set the images in the same grid. Placement should be relative. Also assign a z-index that serves as a reference for positioning below secondary levels.
 
Then we define a set of rules for the image contained in them:
 
.photo img {
  max-width: 100%;
  height: auto;
  border: 10px solid #fff;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

 

With max-width: 100% and height: auto we make sure that the image is always perfectly adapts to its container. Then we set a 10px white border often, a slight shading and round off the corners with border-radius. Using border-box define a template that the overall width shall be counted, including also the board and any padding.
 
At this point we do not have an image with a border and drop shadow:
 
step 1 css
 
But to achieve what we want we need to create two more levels we're going to put behind the image. We will not use additional elements in the HTML, but we will use the CSS generated content, or pseudo-the: before and: after. Here is the code:
 
.photo:before, .photo:after {
  content: "";
  background: #c6cfe2;
  width: 100%;
  height: 100%;
  border: 10px solid #fff;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

 

You'll notice that in creating these two levels will have to replicate many of the properties applied to the image with the same values, we speak specifically of the border, shadow and border-radius. For the rest, we need to set width and height to 100% and, especially, position absolutely levels with a value equal to 0 for left. You should also add a background color.
 
[adsense:block:adcontenuto]
 
In this way, the levels will be positioned exactly behind the image, so as to be effectively invisible:
 
 
To create the stack we move slightly by adjusting the z-index and position:
 
.photo:before { /* primo livello */
  top: 4px;
  z-index: -10;
}
.photo:after { /* secondo livello */
  top: 8px;
  z-index: -20;
}

The first level we move it down to 4px; the second of 8px. With the value of -10 for the z-index position the first layer behind the main image (the container had z-index: 10), using the value -20 for the second, we place him behind both. Now all three are stacked and visible:

 

We can therefore be summarized as follows the process:
 
  • you set the styles for the container of the image;
  • you set the styles for the image;
  • you create additional levels as content generated by defining their common visual properties;
  • are positioned separately the two levels.
Now let's see how to use CSS3 transformations, to create image stacks.

Create image stacks with CSS3 transformations

Example developed so far can engage the use of CSS3 transformations. We will use it to rotate slightly additional levels. The second demo is identical to the first, with the exception of the last two rules, those with which we position and this time we rotate levels:

 

.photo:before { /* first level */
  top: 4px;
  z-index: -10;
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  transform: rotate(4deg);
}
.photo:after { /* second level */
  top: 8px;
  z-index: -20;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  transform: rotate(-4deg);
}

 

The first layer is rotated 4 degrees to the right (4deg), the second of 4 degrees to the left (-4degr).
 
a variant
In the last example, we placed a small variant, using the background of the second level the base image:
 
 
To get the result we first added an additional class to them in the container HTML markup:
 
<ul id="grid">
   <li class="photo one"><img src="es-1.jpg"></li>
   <li class="photo two"><img src="es-2.jpg"></li>
   <li class="photo three"><img src="es-3.jpg"></li>
   <li class="photo four"><img src="es-4.jpg"></li>
   <li class="photo five"><img src="es-5.jpg"></li>
   <li class="photo six"><img src="es-6.jpg"></li>
   <li class="photo seven"><img src="es-7.jpg"></li>
   <li class="photo eight"><img src="es-8.jpg"></li>
</ul>

And then set the background in CSS like this:

 

.photo.one:before {background: url("es-1.jpg") no-repeat;}
.photo.two:before {background: url("es-2.jpg") no-repeat;}
.photo.three:before {background: url("es-3.jpg") no-repeat;}
.photo.four:before {background: url("es-4.jpg") no-repeat;}
.photo.five:before {background: url("es-5.jpg") no-repeat;}
.photo.six:before {background: url("es-6.jpg") no-repeat;}
.photo.seven:before {background: url("es-7.jpg") no-repeat;}
.photo.eight:before {background: url("es-8.jpg") no-repeat;}

 

The examples have been tested in the latest versions of the major browsers. Those who do not support the content created and / or processing should see the gallery without effects but without sacrificing the essentials, or content.
 
All samples are attached.
 
If you want updates on GALLERY WITH EFFECT STACK OF IMAGES enter your e-mail in the box below:
Development: 

Similar Content

Create applications with Ember.js

ember.js

If at the beginning of his career JavaScript had a role almost decorative, merely add interactivity to Web pages, over the years its role has grown allowing you to create Web pages more sophisticated. Today, the role of this language on the Web, and not only took on such importance that enable achievement of real applications, which require skills so typical of those who develop software in a professional manner.
Development: 

Winning scheme by Bob Stone: formula in 7 steps

bob stone and direct marketingThe sales letter is one of the final and decisive steps of a good marketing campaign, you may have done a great job previous to carry you until the decisive moment, the purchase, but if you're wrong on this step then all the work will be in vain.

The sales letter is the key factor when it represents the instrument in the hands of marketers to convince the user to take the final step, the purchase. In this regard, it seems appropriate to remember the one who can be considered logically the father of Direct Marketing, which Bob Stone.

Web Marketing: 

Megaupload 2.0 will be called Mega and will be unassailable

megaupload 2.0Megaupload will return with the simple name of "Mega", and it seems that this time Kim Dotcom has definitely put protected from possible complaints and raid at home. The new service provides fact that files uploaded by users to be protected by encryption, and the keys are not in possession of directors.
Money Making Systems: 

Here are four goals that every company should measure on social media

social media globeYour social media activity is improvised? You do not know what to take?

The term "Social Media ROI" is often used at random, but in fact it is known that it is very important to our business!
 
But where to start and how right place himself in the online measurement of our overall business objectives?
Web Marketing: 

LG Nexus 4: The first official pictures

Come back from evleaks new images on the Nexus 4 of LG which will be presented on 29 October by Google.

This time, as you can see, the back is completely missing the logo "with Google" that had doubt many users and has made ​​his first appearance the logo "Nexus" as some had originally said.

News Magazine: