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

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

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

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

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

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

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

Читайте также

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

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *