Как создать эффект обрезки изображения в CSS.
Преобразования CSS можно использовать для создания привлекательных эффектов перехода. Один крутой трюк — применить преобразование к элементу и отменить (унаследованное) преобразование дочернего элемента.
Давайте посмотрим на пример!
HTML
<div class="wrapper">
<figure class="figure">
<img class="img" src="img/img.jpg" alt="Car in desert">
</figure>
</div>
В CSS при наведении мы применяем преобразование масштаба к элементу <figure> и преобразование масштаба к элементу <img>.
CSS
.wrapper:hover .figure {
transform: scale(0.9);
}
.wrapper:hover .img {
transform: scale(1.111);
}
Значение масштаба <img> получается путем погружения 1 на значение масштаба (1/0,9).
Демонстрация
Надеюсь Вам понравилась!
