Плавное увеличение изображение на CSS3
 | |
| Этот приём с трансформацией картинки наверняка всем знаком, при наведении на изображение она плавно увеличивается, довольно не плохо и красиво смотрится. Так как сейчас любое увеличение не в стандартном виде, можно смело говорить, что выполнено оригинально и это большой плюс интернет ресурсу в плане информационности. Демо Для начала нам нужно подготовить простую разметку для картинки HTML Код <div class="image"><a href="#"><img width="567" height="241" src="images/screenshot.jpg" /></a></div> или Код <div class="image"><img src="$IMG_URL1$" width="567" height="241" alt="$TITLE$"></a></div> В стилях создаём обычный блок image, этот блок должен быть такого же размера как и изображение (в нашем случае 567 на 241). И обязательно ставим правило overflow:hidden; Оно нужно для того, чтобы изображение не выходило за рамки блока при увеличении. CSS Код .image { overflow:hidden; width: 567px; height:241px; } .image img { -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; } .image img:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); } Вкратце: ease-out - анимация начинается быстро, к концу замедляется, скорость 1 секунда transform - трансформация элемента, в нашем случае масштабируем (увеличиваем), (1.1) размеры можно указать и больше Источник: webref.ru/css | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 14 | |
|
| |
| 1 2 » | |
