Gallery with effect stack of images
When 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.
The basic technique
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:
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:
- 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.
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:
And then set the background in CSS like this:
A recent survey by Nielsen pushes to reflect on the scope of the phenomenon of e-commerce, its latest trends and introduced radical changes in the buying habits of consumers.