Плавне збільшення зображення при наведенні на чистому css3

Цей прийом з картинками я використовую у себе на блозі. Коли користувач наводить на мініатюру будь-якого запису вона плавно збільшується. Погодьтеся, досить не погано і красиво виглядає.

І робиться це тільки за допомогою CSS3, і досить таки просто. Зараз я Вам розповім як це робити.

Як це працює Ви можете подивитися в демо і у мене на блозі на головній сторінці.

Для початку нам потрібно підготувати не складну розмітку html для наших картинок, в даному випадку у нас їх буде 3.

Як бачите, що все картинки мають клас image до якого ми, власне, і будемо задавати параметри.

А ось як виглядають стилі:

Ми створили звичайний блок розміром 380 на 250 пікселів. Це блок повинен бути такого ж розміру як і зображення (в нашому випадку 380 на 250). Відповідно, якщо у Вас картинка буде більшого або меншого розміру, розмір блоку .image робимо такого ж розміру як і картинка.

І обов'язково ставимо правило overflow: hidden; Воно потрібне для того, щоб наше зображення не виходило за рамки блоку при збільшенні.

Тепер задаємо правила для самих зображень:

Анімація відбувається за допомогою параметра transition і transform в CSS3. На всю анімацію у нас йде одна секунда. Якщо Ви хочете, щоб картинка швидше збільшувалася, зменшіть це значення.

У демо картинка збільшується 1.1 рази. Якщо поставити значення 2, то картинка збільшиться в два рази і так далі.

Ось і все, друзі. Як і обіцяв, що урок буде дуже простим. Сподіваюся Вам сподобався цей простий ефект для картинок. До зустрічі.