10.06.13, 22:43
0 комментарий
  Уроки

Простые hover-эффекты для изображений при помощи 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.

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




Увеличение


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


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

Вот 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, это позволит нам получить эффект масштабирования.

Сжатие


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


В прошлом примере, мы посмотрели, как изображение при наведении курсора мыши увеличивается. Рассмотрим обратный эффект. Этот метод в целом точно такой же, только на этот раз вы начнете с размеров в 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;
}


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


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


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

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.

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


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


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

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.

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

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



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


Наклон


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


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

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

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

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


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


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

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%, в результате чего превратится в круг.

Фокус


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


Вот еще один способ использования 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%, как мы это делали в предыдущем примере.

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

Напишите своё мнение