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

Tutorial Drupal Views: How to create a view

ui drupal views

Drupal Views: guide and notes
The Views module allows webmasters to drupal to create, manage and display lists of content and therefore a way of presenting the contents and tables. Essentially it is a query builder that, given some information, it can create queries, execute and lead to visual data in pages, blocks or other formats. Every single view can also have multiple views.
Development: 

How to record a mobile phone call (with App for Android Smartphone)

how to record a call

Imagine you are working on an important work project with other people and you often receive phone calls with suggestions and ideas on what doing. In these cases you should always have a pen and paper at your fingertips but sometimes it’s not possible. For this reason you could record calls directly so you will be able to play back it calmly when you have more free time and draw from it all information you need.

You have not to be a secret agent to do it. You have to do simply an Android smartphone to record all the calls you make or receive on your line and save them as an MP3 file. In this way you can have them always on hand and listen them again every time you want.

Mobile: 

Google under antitrust investigation

google antitrust investigationFor Google may soon open a major problem for the impact their activities. As in past years had been faced with the Microsoft antitrust grip (especially in Europe), now also Google may in fact open the same perspective. The front could be opened in the United States, but the risk is that even after the European Commission can take the same initiative.
News Magazine: 

Logitech Launches Wireless Mouse and Touchpad for Windows 8, peripherals and accessories designed for touch

Windows 8 brings a new way of thinking and use a computer and the manufacturers of computer accessories, are beginning to produce devices to be able to interact as efficiently as possible, with the new operating system from Microsoft.
News Magazine: