Css эффект маштабирования на событии :hover
08.05.2011

Клевый пример показывающий масштабирование для события :hover. При наведении курсора мыши каждое изображение медленно увеличивается в размерах, а при потере фокуса - возвращается к своим оригинальным размерам.
Для данного эффекта используется набор изображений размером 400х133 px. Затем они уменьшаются в размерах в коде CSS до 300х100 px и расширяются при наведении курсора мыши. Используется центрирование по горизонтали, и изображение с новым размером может все испортить, поэтому применяется отрицательное значение поля равное половине ширины.
#container {width: 300px;
margin: 0 auto;
}
#ex2 img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
Пример из источника
ПОДПИСАТЬСЯ НА РАССЫЛКУ НОВОСТЕЙ
Последнее в нашем блоге
Интернет-маркетинг
04.11.2019
Интернет-маркетинг
03.10.2019