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

How to understand which theme and plugins uses a Wordpress website

how to understand Wordpress theme and plugins

Observing a Wordpress site, I have always wondered: How can I to understand the theme or plugin used to achieve a given functionality? While at first I watched the source code to take references and information, now there is a way easier and faster.

If you would like to see that theme is using a Wordpress site or its plugins then you will find this resource very useful: What Wordpress Theme is That.

Development: 

The @ mentions of Instagram translated automatically on Twitter

instagram on twitterA small and fast news about Instagram is sure to please lovers of this now proven compatibility mobile application but also aficionados of Twitter.
 
For non-experts and for the less "geek" is a little cumbersome to understand at first, but not impossible.
News Magazine: 

Study and monitoring of the SERP with Advanced Web Ranking

advance serp ranking

Companies are increasingly aware of the importance of the Internet to promote their business and more and more evident that the mere creation of a corporate website is not enough: you need to define an online identity of its products and to make sure that they are visible to network users.
SEO: