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

05/05/201505/05/2015 admin 0 Комментариев HTML/CSS

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

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

В коде 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 //для красоты перехода можно тоже задать транзишн.
}

Демо:

See the Pen <a href="http://codepen.io/vavik96/pen/KpdWKM/">Easy Image Hover Effects</a> by vavik (<a href="http://codepen.io/vavik96">@vavik96</a>) on <a href="http://codepen.io">CodePen</a>.<br />

По материалам Joshua Johnson.
Перевод — Дежурка.

Vavik96

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

Установка

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

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

Webkit-фильтры

Демо:

Добавить комментарий Отменить ответ

Установка

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

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

Webkit-фильтры

Демо:

Вам также может понравиться

Таблица базовых HTML цветов

3D слайдер с CSS3 переходами и ключевыми кадрами анимации.

Многоколоночный текст на CSS3

Добавить комментарий Отменить ответ