Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Простые hover-эффекты для изображений при помощи CSS

19 декабря 2012 | Опубликовано в css | 15 Комментариев »

Hover-эффекты — достаточно интересная тема для изучения.  Ведь их применение может сделать ваш сайт более динамичным и живым. Сегодня мы рассмотрим некоторые эффекты для работы с изображениями. Каждый пример  имеет HTML и CSS коды, которые вы можете увидеть в действии.

 Посмотрите на демо ниже, чтобы увидеть все hover-эффекты, которые будут рассматриваться в этом уроке.

 

Установка

Перед тем, как приступить к созданию отдельных примеров, требуются некоторые базовые установки. Ниже приведен CSS-код, которые мы будем использовать, чтобы реализовать все примеры.

 

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #333;
}

.pic {
  border: 10px solid #fff;
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;
}

Большинство это основные вещи: box-sizing  позволяет управлять моделями (не стесняйтесь применять более точные настройки, если вам не нравится универсальный селектор). Класс pic дает нам место, чтобы применять некоторые основные стили для каждой  фотографии.

Масштабирование и панорамирование

Первая группа эффектов включает в себя использование некоторых приемов с  hidden overflow.

 Demo

Увеличение

Для начала, мы сделаем так, что, когда пользователь наводит курсор на изображение, фотография увеличивалась, но продолжала оставаться в пределах своих границ.

Вот HTML-код:

<div class="grow pic">
  <img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>

Обратите внимание, что изображение, которое было использовано в примере имеет размеры 400px на 400px. Теперь давайте посмотрим CSS.

/*GROW*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.grow img:hover {
  width: 400px;
  height: 400px;
}

Мы вначале устанавливаем размер изображения зооpx на 300px, а затем, когда пользователь наводит на него курсор, увеличиваем к 400px. Поскольку у нас overflow - hidden, это позволит нам получить эффект масштабирования.

Сжатие

В прошлом примере, мы посмотрели, как изображение при наведении курсора мыши увеличивается. Рассмотрим обратный эффект. Этот метод в целом точно такой же, только на этот раз вы начнете с размеров в 400px и  при наведении курсора уменьшите их на 300 пикселей.

HTML

<div class="shrink pic">
  <img src="http://lorempixel.com/400/400/nightlife/4" alt="city">
</div>

CSS

/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.shrink img:hover {
  width: 300px;
  height: 300px;
}

Боковое панорамирование

В следующем эффекте размер изображения не меняется, но при наведении фотография перемещается в сторону. Это хороший способ, чтобы подчеркнуть движение объекта.

HTML

<div class="sidepan pic">
  <img src="http://lorempixel.com/600/300/sports/8" alt="kick">
</div>

Здесь мы используем изображение шириной 600px и высотой  только 300px — мы изменяем горизонтальное положение фотографии и нам не нужно применять эффекты к высоте.

CSS

/*SIDEPAN*/
.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.sidepan img:hover {
  margin-left: -200px;
}

Для создание эффекта панорамирования  мы не будем изменять размер изображения, как это делали в прошлый раз, но вместо этого, используя margin, будем размещать изображение левее. Если вы хотите, чтобы  изображение перемещалось вправо, используйте margin-right.

Вертикальное  панорамирование

Чтобы передать эффект движения, будем еще раз использовать этот эффект — он также подходит для создания вертикального панорамирования.

HTML

<div class="vertpan pic">
  <img src="http://lorempixel.com/300/600/sports/5" alt="climb">
</div>

CSS

/*VERTPAN*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.vertpan img:hover {
  margin-top: -200px;
}

Код практически такой же, как и в прошлый раз, только теперь  вместо margin-left мы используем  margin-top.

Трансформация

Следующие  эффекты  более динамичны.

Демо

Наклон

Теперь давайте сделаем так, чтобы при наведении на изображение, изменялся угол наклона.

HTML

<div class="tilt pic">
  <img src="http://lorempixel.com/300/300/transport/5" alt="car">
</div>

CSS

/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

Как вы можете видите, все, что нам нужно было — повернуть изображение на десять градусов. Просто и эффективно!

Скругление углов

Когда пользователь наводит на изображение, оно начинает вращаться, при этом превращаясь из круга в квадрат.

HTML

<div class="morph pic">
  <img src="http://lorempixel.com/300/300/nature/5" alt="beach">
</div>

CSS

/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

Здесь установлен класс  morph, который начинает вращаться на 360 градусов при наведении курсора мыши на него, а  border-radius  будет постепенно изменяться до 50%, в результате чего превратится в круг.

Фокус

Вот еще один способ использования border-radius для закругления изображения. На этот раз, однако, мы будем  не только увеличиватьborder-radius, но и его толщину. В сочетании с border-box, это создаст эффект, который фокусируется на определенной части изображения.

HTML

<div class="focus pic">
    <img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
  </div>

CSS

/*FOCUS*/
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

 

Мы взяли border 10px и превратил его в 70px черную рамку при проворачивании радиусе до 50%, как мы это делали в предыдущем примере.

Webkit-фильтры

В отличие от приведенных выше примеров, каждый из которых использует несколько префиксов, чтобы обеспечить максимальную совместимость браузера, следующие примеры используют только префикс WebKit. Данные примеры работают только в Safari и Chrome. Несмотря на  ограничения, Webkit-фильтры позволяют выполнять некоторые довольно удивительные эффекты! Демо 

Размытие

 

Первый эффект, который мы будем применять, — простое размытие. Теперь размытия можно добиться с помощью одной маленькой строки кода.

HTML

<div class="blur pic">
  <img src="http://lorempixel.com/300/300/transport/2" alt="plane">
</div>

CSS

/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.blur img:hover {
  -webkit-filter: blur(5px);
}

Как вы видите, мы используем  -webkit-filter , а затем устанавливаем размытие blur  5px.

B&W

На этот раз мы собираемся снизить насыщенности изображения при наведении на него курсора мыши. Раньше, чтобы добиться такого результата, нужно было использовать два изображения, но с фильтрами Webkit, мы можем сократить до одного.

HTML

<div class="bw pic">
  <img src="http://lorempixel.com/300/300/nature/2" alt="sea">
</div>

CSS

/*B&W*/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.bw:hover {
  -webkit-filter: grayscale(100%);
}

Здесь для grayscale было установлено значение 100%.

Яркость

Для нашего последнего эффекта, мы будем затемнять фото по умолчанию, а затем возвращать его в нормальное состояние при наведении курсора мыши.

HTML

<div class="brighten pic">
  <img src="http://lorempixel.com/300/300/technics/2" alt="sea">
</div>

CSS

/*DARKEN*/
.brighten img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.brighten img:hover {
  -webkit-filter: brightness(0%);
}

По материалам  Joshua Johnson.

Перевод — Дежурка.

Возможно, вас также заинтересуют следующие статьи:

 




Комментарии

  1. X-3mal
    Thumb up Thumb down +4

    в ФФ последние 3 печаль

    ИЕ вообще все печаль :)

    Сергей Ответ:

    Thumb up Thumb down +1

    Да в ИЕ вообще 99% сайтов — печаль. Да и сам по себе ИЕ одна большая печаль. =)

    X-3mal Ответ:

    Thumb up Thumb down 0

    Полностью согласен. Но есть дурацкая привычка верстать кроссбраузерно :)

    Хотя с другой стороны, ничего жизненно важного не сломается на ИЕ. Просто будет менее красиво. Я думаю, пользователи ИЕ не знают, что такое красивый сайт :)

  2. Сергей
    Thumb up Thumb down +1

    А про остальные браузеры это да, в каждом из браузеров какой то из эффектов не работает

  3. Fashion Art
    Thumb up Thumb down 0

    Понравилось. А как сделать так чтобы при наведении на картинку появлялась полоса с надписью?

    635c98150f24.jpg

    Nadijka Ответ:

    Thumb up Thumb down +4

    Можно сделать минимум тремя способами плюс один, если использовать скрипт.

    Но эффект несложный, я бы делала без скрипта.

    И если делать без скрипта, то в коде html у вас должен быть блок с текстом, скажем Some text. Ставим его после картинки, получается:

    Some text

    Дописываем в стили для класса .grow.pic {position:relative} и прописываем для нашего текста такое:

    .text{

    position: absolute; //абсолютная позиция относительно родителя

    bottom:0px; left:0; // расположение

    width: 100%; height: 55px; //размеры

    background: rgba (0, 0, 0, 0.5); //цвет фона

    display:none; //скрываем элемент

    }

    Для того, чтобы текста сначала не было, а потом он появился при наведении, нужно задать стили для события hover

    Для события hover для класса .grow пишем следующее:

    .grow:hover .text{display:block }

    Или можно использовать не свойство display, а свойство visibility:

    .text{visibility:hidden}

    .grow:hover .text{visibility:visible }

    Или еще вариант задать высоту в ноль, а потом выставить в нужную:

    .text{height:0}

    .grow:hover .text{

    height:50px;

    -moz-transition:height 1s ease 0s //для красоты перехода можно тоже задать транзишн.

    }

    Fashion Art Ответ:

    Thumb up Thumb down 0

    Спасибо, все понятно!

  4. Евгений
    Thumb up Thumb down 0

    Что-то моя не догонять: в каждом примере в html класс называется так-то, а в css стиль применяется почему то к чему то другому...

    и соответственно .brighten img

    непонятки какие-то)))

  5. Витя
    Thumb up Thumb down 0

    Можно после того как hover сработал оставить его в таком положении не менять обратно. У меня на сайте я хочу сделать несколько хедеров, при наведении на хедер вылазит вторая картинка и остается на месте не меняется обратно как это сделать?

  6. Alex
    Thumb up Thumb down 0

    «Увеличение» растягивает картинку только по вертикали! Не понимаю в чём дело.

  7. wdtime.ru
    Thumb up Thumb down +1

    wdtime.ru/css/hover-css

  8. Борис
    Thumb up Thumb down 0

    спасибо за статью! она уникальна и помогла мне!

  9. Александр
    Thumb up Thumb down 0

    Здравствуйте.Мне нравиться эффект при наведении на своем блоге. Хотелось бы извлечь этот эффект из своего сайта. Не могли бы вы помочь? Спасибо

  10. Борис
    Thumb up Thumb down 0

    Как сделано? — после того как отводится мышка изображение возвращается в исходное положение?