Здравствуйте. Сегодня мы поговорим об эффекте приближения (зума) на CSS для изображений.
Припустим у нас есть картинка, вставляем HTML код:
|
1 |
<div class="image"><a href="#"><img width="380" height="250" src="images/im1.jpg" /></a></div> |
Наши картинки имеют класс image к которому мы и будем задавать стили:
|
1 2 3 4 5 |
.image { overflow:hidden; width: 380px; height:250px; } |
Создаем блок размером 380 на 250 пикселей. Наш блок будет идентичного размера как и изображение 380px на 250px . Стоит учесть, что для корректного увеличения картинки, ваше изображение должно быть точного размера с блоком (подгоняем эти размеры), иначе будет некрасиво.
Так же не забываем за overflow:hidden; . Это нужно для того, чтобы когда изображение зумируется, оно не выходило за наш блок.
Далее задаем стили для изображений:
|
1 2 3 4 5 6 7 8 9 10 11 |
.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); } |
Готово, теперь вы с легкостью сможете стилизировать свои картинки.
Обратите внимание, что свойство transition работает только в Chrome, Safari, Opera 10.5+, Firefox 4+
гггг