Tell me how to make the arrangement of the pictures one after another and a ladder more or less. I did it like this, but this is not very universal, and is not convenient in my opinion

#i2{ position: absolute; left: 15px; top: 19px; z-index: -1; width:235px; box-shadow: 0px 0px 10px rgba(0,0,0,0.5); } #i3{ position: absolute; left: 21px; top: 30px; z-index: -2; width:220px; }

Here is the whole example http://jsfiddle.net/Zkolya_linkoln/to0hcfy7/3/ Thanks in advance

    2 answers 2

    You can do it like this with JS:

    1. we place all the elements under each other in one container;
    2. find all the images, for example, document.querySelectorAll('b-container img') ;
    3. For each element we apply the CSS transform: translateY(Xpx) scale(X) property.

    jsFiddle with a complete example :

     imgs.forEach(function(item) { item.style.transform = 'translateY(' + down + 'px) ' + 'scale(' + scale + ')'; down += downStep; scale -= scaleStep; });

    Pluses + :

    1. the transform property does not cause recalculation of styles, so this will happen quickly with any number of pictures on the page;
    2. no need to write your own style for each picture.

    Cons - :

    1. since the pictures must be in the original position one above the other, we attach strongly enough to their size;
    2. plus the transform properties in this situation creates a minus. It is necessary to provide in the size of the container that the pictures will move down.
      1. outer container in order to fix the size
      2. nth-child, in order not to invent classes, or the generation of corresponding javascript styles
      3. centering of absolutely positioned element

      a flat list of pictures as in question, flexible and cross-browser, but at the same time on pure css, perhaps only in a similar way: (you should use the mixin of the preprocessor to fold the duplicate code and maintain such depth as necessary)

       gallery-preview { display: block; position: relative; width: 310px; height: 310px; } img { position: absolute; transition: 1s; height: 100%; width: 100%; margin: 0 auto; left: 0; right: 0; } img:nth-child(1) { z-index: 3; height: 100%; width: 100%; top: 0%: } img:nth-child(2) { z-index: 2; height 90%; width: 90%; top: 10%; } img:nth-child(3) { z-index: 1; height 80%; width: 80%; top: 20%; } img:hover { z-index: 5; } 
       <gallery-preview> <img id="first" src="http://t2.gstatic.com/images?q=tbn:ANd9GcTtwaOFm5x207suB5vq5gM48ii7HjYWWg8TtOGRojCjsjs1VEC0" /> <img id="i2" src="http://4.bp.blogspot.com/-J6yPcDCmk5w/VOsya5JPDiI/AAAAAAAAChA/V3kcmDdbmpQ/s1600/jQuery%2BInterview%2BQuestions%2Band%2BAnswers.png" /> <img id="i3" src="http://centrecon.ru/sites/default/files/field/image/123.jpeg" /> </gallery-preview>

      Next, there is the css3 transform: translateZ() , transform: scale() property, as well as other transformations, through which you can make the code even easier by avoiding the need to center something and change the size (perspective) by a single number.

      And the most correct decision is to attach pictures to containers recursively (it can be a script):

       <div class="cn"> <img src="..."> <div class="cn"> <img src="..."> <div class="cn"> <img src="..."> </div> </div> </div>

      Then, the selector will require only two: .cs > img { ... } and .cs > .cs {...} , and the CSS rules are relative.