- внешний контейнер, дабы зафиксировать размер
- nth-child, с целью не придумывать классы, либо генерация соотв стилей на javascript
- центрирование абсолютно-спозиционированного элемента
плоский список картинок как в вопросе, гибко и кроссбраузерно, но при этом на чистом css, пожалуй - только подобным образом: (стоит использовать миксин препроцессора, чтобы свернуть повторяющийся код и поддержать такую глубину, как необходимо)
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>
Далее, существует свойство css3 transform: translateZ()
, transform: scale()
, а также прочие трансформации, посредством которых можно сделать код ещё проще - избежав необходимости что-либо центрировать и менять размер (перспективу) уже вообще одним числом.
И самое правильное решение - вложить картинки в контейнеры рекурсивно (можно скриптом):
<div class="cn">
<img src="...">
<div class="cn">
<img src="...">
<div class="cn">
<img src="...">
</div>
</div>
</div>
Тогда, селектора потребуется всего два: .cs > img { ... }
и .cs > .cs {...}
, и CSS-правила получаются относительные.