CSS - Вращение картинок внутри контейнера так, чтобы они не выходили за края

CSS - Вращение картинок внутри контейнера так, чтобы они не выходили за края


Посмотрите внимательно, центральная картинка смещена css-свойством transform, но при этом находится в пределах своего контейнера (соседние картинки аналогичного размера). В данной статье научимся применять такие эффекты. Дополнительно, зададим вращение соседних картинок в разные стороны

Итак, воссоздадим разметку для картинок, как на скриншоте выше:

<section>
<article><img src="1.jpg" /></article>
<article><img src="1.jpg" /></article>
<article><img src="1.jpg" /></article>
</section>


Ну тут все предельно просто. Создаем секцию и помещаем картинку в контейнер тегом article. Все, что остается, это применить несколько правил на CSS:

article{
/*размеры у каждого свои*/
overflow: hidden; /*все, что заходит за границы - не показывать*/
}
article img{
max-width: 100%;
text-align: center;
}
article:nth-of-type(1) img:hover,
article:nth-of-type(3) img:hover{
transition:.5s;
transform: scale(1.25) rotate(-7deg);
}
article:nth-of-type(2) img:hover{
transition:.5s;
transform: scale(1.25) rotate(+7deg);
}


Вот и все! Пользуйтесь!


Понравилась статья "CSS - Вращение картинок внутри контейнера так, чтобы они не выходили за края" из раздела Веб разработка » HTML/CSS? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 1095   Дата: 25-апр-2016, 15:30

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика