🖥 Эффект зума с поворотом при наведении на изображение с помощью CSS

🖥 Эффект зума с поворотом при наведении на изображение с помощью CSS

Идея очень простая 😏
🔜 Контейнер имеет фиксированный размер и overflow со значением hidden, чтобы изображение обрезалось и не выходило за его границы;
🔜 При наведении курсора изображение масштабируется внутри контейнера с помощью transform: scale(1.2) и делает небольшой поворот благодаря rotate(10deg).

HTML разметка

CSS стили
.container {
width: 640px;
height: 360px;
overflow: hidden;
}
.container img {
object-fit: cover;
transition: transform 0.8s ease;
}
.container:hover img {
transform: scale(1.2) rotate(10deg);
}

👍- если было полезно | ➡️ WebTaverna