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

Разместил / Просмотров: 60 455 / комментариев 28

Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.

И делается это только с помощью CSS3, и довольно таки просто. Сейчас я Вам расскажу как это делать.

Как это работает Вы можете посмотреть в демо и у меня на блоге на главной странице.

Плавное увеличение картинки при наведении только на CSS3.

Демо

Html

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

<div class="image"><a href="#"><img width="380" height="250" src="images/im1.jpg" /></a></div>
 <div class="image"><a href="#"><img width="380" height="250" src="images/im2.jpg" /></a></div>
 <div class="image" ><a href="#"><img width="380" height="250" src="images/im3.jpg" /></a></div>

Как видите, что все картинки имеют класс image к которому мы, собственно, и будем задавать параметры.

CSS

А вот как выглядят стили:

.image {
 overflow:hidden;
 width: 380px;
 height:250px;
 }

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

И обязательно ставим правило overflow:hidden; Оно нужно для того, чтобы наше изображение не выходило за рамки блока при увеличении.

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

.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 и transform в CSS3. На всю анимацию у нас уходит одна секунда. Если Вы хотите, чтобы картинка быстрее увеличивалась, уменьшите это значение.

В демо картинка увеличивается 1.1 раза. Если поставить значение 2, то картинка увеличится в два раза и так далее.

Демо

Вот и всё, друзья. Как и обещал, что урок будет очень простым. Надеюсь Вам понравился этот простой эффект для картинок. До скорых встреч.

  • Артем Нестер

    Благодарю!

  • На здоровье, Артём :)

  • Max

    Спасибо за статью, хотелось бы по подробнее (по шагам) узнать как все это на вордпресс реализовать (какие коды и куда вставлять).. буду очень благодарен…

  • soofft91

    Отличный блог! Набрёл на него пару дней назад и завис на много часов)
    Не подскажите как делаете эффект на некоторых превью картинках к постам, как будто на монитор светит лампа и делается его фото под углом?

  • Здравствуйте, очень рад, что Вам понравился мой блог :) Делается это просто через фотошоп, применяется фильтр «эффекты освещения» и просто переворачивается картинка в редактировании.

  • На вордпресс точно также, только все эти классы примените к классу с миниатюрой. Обычно во всех шаблонах классы разные.

  • Сергей

    В IE работает, если писать просто «transition: all 1s ease-out;» и «transform: scale(1.1);» без префиксов

  • Сергей, спасибо большое :)

  • fasterllc

    А как его на блог WordPress установить? Также, как и на простой?

  • Да, так же как и простой

  • fasterllc

    Посмотрите, у меня пожалуйста, на моём — vgazete.biz
    У меня ведь блоки, их вообще можно так настроить?

  • Да, конечно можно.

  • fasterllc

    Не поможете мне?

  • Попробуйте код вставлять в индекс пхп

  • Alexandr Sementsul

    крутая штуковина! спасибо!
    а как сделать чтобы при наведении ещё появлялся текст?

  • Не всё так просто, нужно пробовать :)

  • Сан

    Круто долго искал решение, спс!

  • все просто!!!! Спасибо, буду использовать )!

  • Рад, что Вам понравилось :)

  • Богдан Гранькин

    а у меня не почему то вылазиет за края блока а не увеличивается как у вас, не подскажите почему? Информер на главной под слайдером шапкой сайт http://plyk.ru/

  • overflow:hidden; не поставили

  • Богдан Гранькин

    я полностью ваш код скопировал и поставил, стоит у меня overflow:hidden;

    Вот мой код:

    .image {
    overflow: hidden;
    width: 380px;
    height: 250px;
    }

    .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);
    }

  • Значит, возможно, какие то классы конфликтуют

  • Богдан Гранькин

    значит не получится у меня? жаль….

  • Получится, просто нужно разобраться в чём проблема.

  • Богдан Гранькин

    мне не разобраться я в этом полный ноль, но если нельзя сделать как у вас, можно сделать что бы тогда картинки увеличивались больше? Ну например они сейчас на 5 px увеличивается, а можно сделать что бы увеличивались на 20? Посмотрите у меня в баре на сайте блок «Популярное». Буду вам презнателен за помощь.

  • Просто увеличьте значения тут

    .image img:hover{

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -o-transform: scale(1.1);

    Поставьте 2

  • Богдан Гранькин

    спасибо