Hover эффект при наведении на картинку: Hover-эффекты для изображений – Интересные hover эффекты: для изображений, кнопок, ссылок

Hover эффекты для изображений. Эффекты при наведении на изображение.

Собираю подборку эффектов для изображений при наведении. Они еще называются Hover эффекты изображений. Сами коды размещены на CodePen. Там же можно посмотреть демо-примеры. Копируйте или скачивайте код эффектов, экспериментируйте и используйте в своих проектах.

Эффект увеличения картинки при наведении

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

See the Pen Hover эффект изображения при наведении by Egor (@Far-East) on CodePen.

 

Оверлей эффект с подписью при наведении на изображение

При наведении на картинку проявляется цвет и анимированная подпись, плюс ссылка. В этом примере использована сетка bootstraр, но можно брать какую угодно сетку, желательно просто в проекте использовать normalize.css. Залил на CodePen, может еще и пригодится.

See the Pen Hover эффект для изображений by Egor (@Far-East) on CodePen.

 

Красивый эффект наложения тени

При наведении на изображение плавно появляется тень с четырех сторон. даже не знаю как описать данный эффект. Хотя что его описывать, смотрите ниже. На реальных картинках этот hover эффект смотрится гораздо интереснее.

See the Pen Еще один ховер для картинок by Egor (@Far-East) on CodePen.

   

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

Смотрите также

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

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

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

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

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

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

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

 Demo

Увеличение

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

Вот HTML-код:

<div>
  <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>
  <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>
  <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>
  <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>
  <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>
  <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>
    <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>
  <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>
  <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>
  <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.

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

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

 

CSS: зависание Selector

      

Example

Выберите и стилизуйте ссылку, когда на нее наведете курсор:

       а: зависать  {
 цвет фона: желтый;
 }   

Попробуй сам »

Больше примеров «Попробуй сам»

---

Определение и использование

Селектор : hover используется для выбора элементов при наведении мыши на них.

Совет: Селектор: hover можно использовать со всеми элементами, не только по ссылкам.

Совет: Используйте: селектор ссылок для стилизации ссылок на непосещенные страницы, селектор: посещенный стиль ссылки на посещенные страницы, а также : активный селектор для стиля активной ссылки.

Примечание: : hover ДОЛЖЕН идти после: link и: посещения (если они присутствуют) в определении CSS, чтобы быть эффективным!

---

Браузерная поддержка

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

                                

Selector
: hover	4.0	7.0	2.0	3.1	9.6

Примечание: В IE должен быть объявлен чтобы селектор: hover работал с другими элементами, кроме element.

---

CSS Syntax

: hover {
css декларации;
} демонстрация

---

---

Больше примеров

Example

Выберите и стилизуйте элемент

,