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

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

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

Ну тут все предельно просто. Создаем секцию и помещаем картинку в контейнер тегом 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);
}

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