Как сделать меняющуюся картинку на сайте «до и после»
Смена изображения «до и после» — весьма эффектный прием, который часто используют фотографы на своих сайтах, чтобы показать красивую постобработку фотографии. Обычно для этого применяют JavaScript.
Однако того же эффекта можно добиться и на чистом CSS3 при помощи анимации. Возьмем свойство clip из арсенала CSS3 и парочку старых знакомых псевдоэлементов :before и :after. Как говорит htmlbook:
Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым.
Для начала приведу код стилей:
a.forest{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 630px;
height: 386px;
}
a.forest img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,630px,386px,0);
}
a.forest img:nth-of-type(2){
z-index: 1;
}
a.forest:hover img:nth-of-type(1){
clip: rect(0,0,386px,0);
opacity: 0;
}
Здесь интересны несколько моментов.
1. Синтаксис свойства clip записан следующим образом:
clip: rect(Y1, X1, Y2, X2);
Здесь в качестве значений Y1, X1, Y2, X2 мы используем расстояние от края элемента до области вырезки. В нашем случае это 0, 630px, 386px, 0. То есть, соразмерно самой картинке, которая у нас 630х386 пикселей.
2. Вторая плюшка довольно сложная для понимания вот так вот сходу. Это псевдокласс :nth-of-type, который используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
Все понятно? Думаю, нет. Но не стоит отчаиваться! Просто запомните, что эта штука последовательно выбирает элементы на странице и прикручивает к ним соответствующий набор правил. Чтобы было понятнее, взгляните на код html:
<a class="forest">
<img src="forest-before.jpg" alt="">
<img src="forest-after.jpg" alt="">
</a>
Здесь мы расположили две картинки подряд, обернув общим классом .forest, привязанном у тегу ссылки a. Так вот первая картинка forest-before.jpg и будет по счету первой в дереве элементов. Это и так видно в общем-то.
Стало быть, :nth-of-type(1) будет иметь отношение к этой первой картинке, а :nth-of-type(2) — ко второй.
Таким образом, самое последнее правило opacity: 0; , относящееся к первой картинке, попросту сделает ее прозрачной при наведении мышки :hover, и нам станет видна вторая картинка, находящаяся под ней.
Вот и вся наука! Живой пример можно посмотреть здесь.
За идею сэнкас dynamicdrive.com
