Как сделать меняющуюся картинку на сайте «до и после»

Как сделать меняющуюся картинку на сайте «до и после»

Смена изображения «до и после» — весьма эффектный прием, который часто используют фотографы на своих сайтах, чтобы показать красивую постобработку фотографии. Обычно для этого применяют 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

Пожалуйста, оцените статью и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Оставить комментарий: