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

Самая распространенная функция hover-эффектов - это выделение ссылок или кнопок текста. Но есть и много других функций.

Hover-эффекты добавляют к веб-сайту элемент интерактивности. Они имеют сильный эффект, когда применяются к изображениям, а также имеют большое влияние на пользователя, так как эти эффекты помогают создать хорошо спроектированный веб-сайт.

Hover - это эффект при наведении курсора мыши на какой-нибудь элемент. Он часто используется для стилевого оформления, а также для удобства и простоты использования.

Здесь вы узнаете, как создать креативные hover-эффекты для изображений, используя только CSS.

1. Создайте HTML

Добавьте тег <figure> с классом "image". Тег <figure> используется для указания независимого контента.
Используйте тег <figcaption>, чтобы создать надпись или пояснение для контента внутри тега <figure>.

<figure class="image">
  <img src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" />
  <figcaption>
    <h3>W3docs</h3>
  </figcaption>
</figure>

2. Добавьте CSS

Установите max-width, min-width и max-height изображения.
Установите position в relative.
Установите overflow в hidden, чтобы контент был срезан и поместился в блок.
Установите цвет для figcaption и выравнивание текста.

figure.image {
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 220px;
width: 100%;
background: #000000;
color: #eeeeee;
text-align: center;
}

Добавьте transition для класса image. Мы используем селектор * (asterisk), который выделяет все элементы документа.

figure.image * {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

Установите max-width изображения в 100%.
Установите степень прозрачности элемента.

figure.image img {
max-width: 100%;
position: relative;
opacity: 0.6;
}

Нашим следующим шагом будет добавление стиля к h3.

Установите background и position для h3.
Задайте свойство transform. Оно указывает 2D или 3D трансформацию элемента. Данное свойство позволяет вращать, масштабировать, сдвигать элемент.
Задайте text-transform со значением uppercase для установления символов верхнего регистра.
Задайте font-weight. Здесь мы установили значение в 400.

figure.image h3 {
position: absolute;
left: 50px;
right: 50px;
display: inline-block;
background: #000;
-webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
-moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
-ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
-o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
padding: 15px 5px;
margin: 0;
top: 50%;
text-transform: uppercase;
font-weight: 400;
}

Теперь добавим стиль к псевдоэлементу :before, что является элементом сгенерированного контента. Он добавляет перед контентом элемент любого типа.

Установите height и width элемента и задайте цвет.
Установите transition в transition-duration (0.3).
Укажите свойство transform. Поверните элемент на 110 градусов и переместите его по оси y на -50%.

figure.image:before {
height: 130%;
width: 130%;
top: 0;
left: 0;
content: '';
background: #cccccc;
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(110deg) translateY(-50%);
-moz-transform: rotate(110deg) translateY(-50%);
-ms-transform: rotate(110deg) translateY(-50%);
-o-transform: rotate(110deg) translateY(-50%);
transform: rotate(110deg) translateY(-50%);
}

Следующим шагом установите hover-эффект для изображения, h3 и :before.

figure.image:hover img,
figure.image.hover img {
opacity: 1;
-moz-transform:scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
figure.image:hover h3,
figure.image.hover h3 {
-moz-transform:skew(-10deg) rotate(-10deg) translate(-150%, -50%);
-ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
-o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.image:hover:before,
figure.image.hover:before {
-moz-transform:rotate(110deg) translateY(-150%);
-ms-transform: rotate(110deg) translateY(-150%);
-o-transform: rotate(110deg) translateY(-150%);
transform: rotate(110deg) translateY(-150%);
}

И наконец, соединим все части нашего кода:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      figure.image {
      position: relative;
      overflow: hidden;
      margin: 10px;
      min-width: 220px;
      max-width: 310px;
      max-height: 220px;
      width: 100%;
      background: #000000;
      color: #eeeeee;
      text-align: center;
      }
      figure.image* {
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      }
      figure.image img {
      max-width: 100%;
      position: relative;
      opacity: 0.6;
      }
      figure.image h3 {
      position: absolute;
      left: 50px;
      right: 50px;
      display: inline-block;
      background: #000;
      -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
      -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
      -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
      -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
      transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
      padding: 15px 5px;
      margin: 0;
      top: 50%;
      text-transform: uppercase;
      font-weight: 400;
      }
      figure.image:before {
      height: 130%;
      width: 130%;
      top: 0;
      left: 0;
      content: '';
      background: #cccccc;
      position: absolute;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      -webkit-transform: rotate(110deg) translateY(-50%);
      -moz-transform: rotate(110deg) translateY(-50%);
      -ms-transform: rotate(110deg) translateY(-50%);
      -o-transform: rotate(110deg) translateY(-50%);
      transform: rotate(110deg) translateY(-50%);
      }
      figure.image:hover img,
      figure.image.hover img {
      opacity: 1;
      -moz-transform:scale(1.1);
      -ms-transform: scale(1.1);
      -o-transform: scale(1.1);
      transform: scale(1.1);
      }
      figure.image:hover h3,
      figure.image.hover h3 {
      -moz-transform:skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      }
      figure.image:hover:before,
      figure.image.hover:before {
      -moz-transform:rotate(110deg) translateY(-150%);
      -ms-transform: rotate(110deg) translateY(-150%);
      -o-transform: rotate(110deg) translateY(-150%);
      transform: rotate(110deg) translateY(-150%);
      }
    </style>
  </head>
  <body>
    <h2> hover-эффект</h2>
    <figure class="image">
    <img src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="W3docs"/>
    <figcaption>
      <h3>W3docs</h3>
    </figcaption>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример трехмерной трансформации:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .example {
      width: 250px;
      height: 250px;
      margin: 20px auto 40px auto;
      perspective: 1000px;
      }
      .example a {
      display: block;
      width: 100%;
      height: 100%;
      background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      background-size: cover;
      transform-style: preserve-3d;
      -webkit-transform: rotateX(80deg);
      -moz-transform: rotateX(80deg);
      -ms-transform: rotateX(80deg);
      -o-transform:  rotateX(80deg);
      transform: rotateX(80deg);
      -webkit-transition: all 0.8s;
      -moz-transition: all 0.8s;
      -o-transition: all 0.8s;
      transition: all 0.8s;
      }
      .example:hover a {
      -webkit-transform: rotateX(10deg);
      -moz-transform: rotateX(10deg);
      -ms-transform: rotateX(10deg);
      -o-transform:  rotateX(10deg);
      transform: rotateX(10deg); 
      }   
      .example a:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 20px;
      background: #cccccc;    
      -webkit-transform: rotateX(60deg);
      -moz-transform: rotateX(60deg);
      -ms-transform: rotateX(60deg);
      -o-transform:  rotateX(60deg);
      transform: rotateX(60deg);
      transform-origin: bottom;
      }
    </style>
  </head>
  <body>
    <h2> hover-эффект</h2>
    <div class="example">
      <a href="#"></a>
    </div>
  </body>
</html>

Попробуйте сами!