Всем привет! Долго искал простой способ плавно увеличить картинку при наведении на нее. Большинство способов описанных в интернете предлагают воспользоваться jQuery и т. п., что на мой взгляд немного излишне. Есть достаточно изящное решение с помощью CSS3 .
HTML
Для начало необходимо подготовить html разметку:
Подготавливаем изображения
<div class="zoom_img"><a href="#"><img src="images/img1.jpg" /></a></div> <div class="zoom_img"><a href="#"><img src="images/img2.jpg" /></a></div> <div class="zoom_img"><a href="#"><img src="images/img3.jpg" /></a></div>
Каждую картинку мы обернули в div который имеет класс zoom_img
CSS
Перейдем к стилям, для начала класс zoom_img:
.zoom_img {
overflow:hidden;
width:390px;
height:244px;
}
Размер блока должен быть равен размеру изображения, и необходимо добавить overflow:hidden; что бы ничего не выходило за размер блока, об этом чуть ниже.
.zoom_img img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.zoom_img img:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
С помощью параметра transition и transform в CSS3 происходит анимация. Время анимации 1 секунда. scale(1.1) – указывает что картинка должна увеличится в 1.1 раза, если необходимо увеличить в два раза, необходимо поставить 2.
И вот тут то необходимо вернуться к параметру overflow:hidden; в классе .zoom_img. За счет того что за рамки div’а ничего не выходит, создается эффект что картинка приближается, если overflow:hidden; убрать, будет видно что картинка увеличивается в размерах.
На этом на сегодня все.
Эммм…
Я обошёл много форумов по анимации при наведении. Вот что я скажу. Я хочу представить очень легкую анимацию «поверх всего»- то есть картинка увеличивается и рядом с ней ничего не меняется.
CSS
/*Создаем блок любого названия*/
.test {
width: 300px; /*Указываем длину изображения*/
height: 170px; /*Указываем ширину изображения*/
transition: 0.3s; /*Указываем время увеличения картинки*/
}
/*Теперь создаем hover для блока*/
.test:hover {
-webkit-transform: scale(1.2); /*Указываем величину изображения при анимации*/
-ms-transform: scale(1.2); /*Указываем величину изображения при анимации*/
transform: scale(1.2); /*Указываем тип увеличения*/
}
HTML
/*Теперь пишем в HTML*/
/*Мы указали стандартную величину еще раз*/
Вот теперь всё!!
Наслаждайтесь)
PS. Все форумы предлагали скачать плагин. Вскоре решил сам по-думать. И создал очень простую анимацию.