Эффекты при наведении на картинку CSS

Подборка Hover эффектов при наведении на картинку CSS. Здесь вы найдете эффекты для галереи, эффекты с появлением текста или иконок, рамки и многие другие интересные эффекты для сайта.

Поворот изображения при наведении CSS

Этот эффект создает видимость объемной картинки. При знании HTML и CSS можно добавить кнопку или ссылку в нужное место и пользователи смогут переходить по ссылке. Хорошо подойдет для галереи изображений или для товаров на сайте.

Пример

Lorem

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis.

HTML


<div class="image-parlax" ontouchstart="this.classList.toggle('hover');">
  <div class="image-container">
    <div class="front-side" style="background-image: url(image.jpg)">
      <div class="inner">
        <p>Lorem</p>
        <span>Lorem ipsum</span>
      </div>
    </div>
    <div class="back-side">
      <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis.</p>
      </div>
    </div>
  </div>
</div>

CSS


.image-parlax{
  width: 50%; /* Ширина изображения */
  cursor: pointer;
}
.image-container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
	  perspective: 1000px;
}
.front-side, .back-side{
  background-size: cover;
  background-position: center;
  min-height: 350px; /* Высота изображения */
  height: auto;
  border-radius: 50%; /* Скругление углов */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}
.back-side{
  background: #343434;
  background: -webkit-linear-gradient(45deg,  #343434 0%,#000000 100%);
  background: -o-linear-gradient(45deg,  #343434 0%,#000000 100%);
  background: linear-gradient(45deg,  #343434 0%,#000000 100%);
}
.front-side:after{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  opacity: .6;
  background-color: #000;
  -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  border-radius: 50%; /* Скругление углов */
}
.image-container:hover .front-side,
.image-container:hover .back-side{
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.back-side{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.inner{
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
            box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
            perspective: inherit;
  z-index: 2;
}
.image-container .back-side{
  -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.image-container .front-side{
  -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.image-container:hover .back-side{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.image-container:hover .front-side{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.front-side .inner p{
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
}
.front-side .inner p:after{
  content: '';
  width: 4rem;
  height: 1px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}
.front-side .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

Меняющаяся рамка при наведении CSS

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

Пример

HTML


<div class="mask mask-one mask-one-frame">
  <img src="image1.jpg" class="mask-img" alt="">
</div>
<div class="mask mask-two mask-two-frame">
  <img src="image2.jpg" class="mask-img" alt="">
</div>
<div class="mask mask-three mask-three-frame">
  <img src="image3.jpg" class="mask-img" alt="">
</div>
<div class="mask mask-four mask-four-frame">
  <img src="image4.jpg" class="mask-img" alt="">
</div>

CSS


/* Настройки */ 
.mask{
    --uiMaskClipPath: var(--maskClipPath);
    box-sizing: var(--maskBoxSizing, border-box);
    display: var(--maskDisplay, inline-flex);
    padding: var(--maskStrokeThickness, 3px);
    clip-path: var(--uiMaskClipPath);
    background-color: var(--maskStrokeColor, currentColor);
    --maskStrokeColor: #ab7445; /* Цвет рамки */
    --maskStrokeThickness: 5px; /* Ширина рамки */ 
}
.mask-img{
    max-width: 100%;
    display: block;
    clip-path: var(--uiMaskClipPath);
}
.mask, 
.mask-img{
    transition: clip-path var(--maskAnimationDuration, .2s) var(--maskAnimationTimingFunction, ease-out);
}
/* Первая рамка */
.mask-one{
    --maskClipPath: polygon(0 10%, 10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%);
}
.mask-one-frame{
    --maskAnimationDuration: .4s;
}
.mask-one:hover, 
.mask-one:focus{
    --maskClipPath: polygon(0 0, 100% 0, 100% 10%, 100% 100%, 90% 100%, 0% 100%, 0% 90%, 0% 10%);
}
/* Вторая рамка */
.mask-two{
    --maskClipPath: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.mask-two-frame{
    --maskAnimationDuration: .4s;
}
.mask-two:hover, 
.mask-two:focus{
    --maskClipPath: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
/* Третья рамка */
.mask-three{
    --maskClipPath: polygon(0 10%, 10% 10%, 10% 0, 90% 0, 90% 10%, 100% 10%, 100% 90%, 90% 90%, 90% 100%, 10% 100%, 10% 90%, 0 90%);
}
.mask-three-frame{
    --maskAnimationDuration: .5s
}
.mask-three:hover, 
.mask-three:focus{
    --maskClipPath: polygon(90% 0, 100% 0, 100% 10%, 100% 90%, 100% 100%, 90% 100%, 10% 100%, 0 100%, 0 90%, 0 10%, 0 0, 10% 0);
}
/* Четвертая рамка */
.mask-four{
    --maskClipPath: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}
.mask-four:hover, 
.mask-four:focus{
    --maskClipPath: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

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

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

Пример

Заголовок

Текст
Подробнее

HTML


<ul class="hover-effect-scale">
  <li>
    <img src="image.jpg" alt="">
    <div>
      <h3>Заголовок</h3>
      <p>Текст</p>
      <a href="">Подробнее</a>
    </div>
  </li>
</ul>

CSS


/* Настройки маркированного списка */
.hover-effect-scale {
    list-style:none;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding: 0;
}
.hover-effect-scale li {
    position: relative;
    display: inline-block;
    background-color: #fff;
    margin: 0;
    border: 5px solid #fff;
    box-shadow: 1px 3px 1px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
/* Заголовок, текст и ссылка */
.hover-effect-scale li h3{
    color: #fff;
    margin: 5px;
}
.hover-effect-scale li p{
    color: #fff;
    margin: 5px;
}
.hover-effect-scale li a {
    display: block;
    text-decoration: none;
    padding: 15px;
    color: #fff;
    background: #000;
    border-radius: 5px;
    margin: 0 auto;
    transition: all 0.4s ease-in-out;
}
.hover-effect-scale li a:hover {
    background: #454545;
    color: #fff;
}
/* Выезжающий блок с текстом */ 
.hover-effect-scale li > div {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.hover-effect-scale li:hover > div {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.hover-effect-scale li div {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.35); /* Фон блока при наведении */
    transition: all 0.4s ease-in-out;
    color: #fff;
}
.hover-effect-scale li img {
    transition: all 0.2s linear;
}
.hover-effect-scale li:hover img {
    transform: scale(1.3);
}
.hover-effect-scale li:hover div {
    opacity: 1;
}

Эффект при наведении на картинку с текстом и кнопкой CSS

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

Пример

Заголовок

Текст
Подробнее
Заголовок

Текст
Подробнее
Заголовок

Текст
Подробнее
Заголовок

Текст
Подробнее

HTML


<ul class="hover-effect-cover">
  <li>
    <img src="image1.jpg" alt="">
    <div class="effect-to-right"> <!-- Выезжающая панель слева направо -->
      <h3>Заголовок</h3>
      <p>Текст</p>
      <a href="">Подробнее</a>
    </div>
  </li>
  <li>
    <img src="image2.jpg" alt="">
    <div class="effect-to-left"> <!-- Выезжающая панель справа налево -->
      <h3>Заголовок</h3>
      <p>Текст</p>
      <a href="">Подробнее</a>
    </div>
  </li>
  <li>
    <img src="image3.jpg" alt="">
    <div class="effect-to-top"> <!-- Выезжающая панель снизу вверх -->
      <h3>Заголовок</h3>
      <p>Текст</p>
      <a href="">Подробнее</a>
    </div>
  </li>
  <li>
    <img src="image4.jpg" alt="">
    <div class="effect-to-bottom"> <!-- Выезжающая панель сверху вниз -->
      <h3>Заголовок</h3>
      <p>Текст</p>
      <a href="">Подробнее</a>
    </div>
  </li>
</ul>

CSS


/* Настройки маркированного списка */
.hover-effect-cover {
    list-style:none;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding: 0;
}
.hover-effect-cover li {
    position: relative;
    width: 49%; /* Задаем ширину элемента списка с картинкой*/
    display: inline-block;
    background-color: #fff;
    margin: 0;
    border: 5px solid #fff;
    box-shadow: 1px 3px 1px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
/* Заголовок, текст и ссылка */
.hover-effect-cover li h3{
    color: #fff;
    margin: 5px;
}
.hover-effect-cover li p{
    color: #fff;
    margin: 5px;
}
.hover-effect-cover li a {
    display: block;
    text-decoration: none;
    padding: 15px;
    color: #fff;
    background: #000;
    border-radius: 5px;
    margin: 0 auto;
    transition: all 0.4s ease-in-out;
}
.hover-effect-cover li a:hover {
    background: #454545;
    color: #fff;
}
/* Выезжающий блок с текстом для панели слева направо */
.hover-effect-cover li > div.effect-to-right {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.hover-effect-cover li:hover > div.effect-to-right {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.hover-effect-cover li div.effect-to-right {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Фон блока при наведении */
    transition: all 0.4s ease-in-out;
    color: #fff;
    transform: translate(-250px, 0px) rotate(0deg); /* Направление выезжающей панели */
}
.hover-effect-cover li:hover div.effect-to-right {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
}
/* Выезжающий блок с текстом для панели справа налево */
.hover-effect-cover li > div.effect-to-left {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.hover-effect-cover li:hover > div.effect-to-left {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.hover-effect-cover li div.effect-to-left {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Фон блока при наведении */
    transition: all 0.4s ease-in-out;
    color: #fff;
    transform: translate(250px, 0px) rotate(0deg); /* Направление выезжающей панели */
}
.hover-effect-cover li:hover div.effect-to-left {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
}
/* Выезжающий блок с текстом для панели снизу вверх */
.hover-effect-cover li > div.effect-to-top {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.hover-effect-cover li:hover > div.effect-to-top {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.hover-effect-cover li div.effect-to-top {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Фон блока при наведении */
    transition: all 0.4s ease-in-out;
    color: #fff;
    transform: translate(0px, 250px) rotate(0deg); /* Направление выезжающей панели */
}
.hover-effect-cover li:hover div.effect-to-top {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
}
/* Выезжающий блок с текстом для панели сверху вниз */
.hover-effect-cover li > div.effect-to-bottom {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.hover-effect-cover li:hover > div.effect-to-bottom {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.hover-effect-cover li div.effect-to-bottom {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Фон блока при наведении */
    transition: all 0.4s ease-in-out;
    color: #fff;
    transform: translate(0px, -250px) rotate(0deg); /* Направление выезжающей панели */
}
.hover-effect-cover li:hover div.effect-to-bottom {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
}

Эффект картинки гармошкой при наведении CSS

Эффект картинки гармошкой при наведении CSS может пригодится для отображении карты, так же можно использовать этот эффект для галереи изображений.

Пример

HTML


<ul class="press">
  <li class="press-item"></li>
  <li class="press-item"></li>
  <li class="press-item"></li>
  <li class="press-item"></li>
</ul>

CSS


.press {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 640px;
  height: 360px;
  display: flex;
}
.press-item {
  list-style: none;
  width: 25%;
  background: url(image.jpg);
  background-size: cover;
  height: 100%;
  transition: 0.5s;
}
.press:hover .press-item:nth-child(odd) {
  transform: skewY(15deg);
  box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
}
.press:hover .press-item:nth-child(even) {
  transform: skewY(-15deg);
  box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
}
.press .press-item:nth-child(1) {
  background-position: 0;
}
.press .press-item:nth-child(2) {
  background-position: -160px;
}
.press .press-item:nth-child(3) {
  background-position: -320px;
}
.press .press-item:nth-child(4) {
  background-position: -480px;
}

Размытие картинки при наведении CSS

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

Пример

HTML


<img src="image.jpg" alt="" class="blur-image"/>

CSS


.blur-image {
    filter: blur(5px); /* Размытие изображения */
    transition: 1s; /* Время перехода */
}
.blur-image:hover {
    filter: blur(0); /* Отменяем размытие */
}

Свойство filter в браузере Internet Explorer не работает.

Черно-белая картинка CSS

При помощи CSS можно менять цвет изображения без графических редакторов, за это отвечает свойство filter. Если к примеру на сайте галерея, то можно добавить эффект при наведении. Так же можно применить и другие фильтры с помощью генератора фильтров для изображений CSS, и скопировать уже готовый код.

Пример

HTML


<img src="image.jpg" alt="" class="grey-image"/>

CSS


.grey-image {
    filter: grayscale(1); /* Черно-белый фильтр для изображения */
    transition: 1s; /* Время изменения цвета изображения */
}
.grey-image:hover {
    filter: grayscale(0); /* Цветное изображение при наведении */
}

Свойство filter в браузере Internet Explorer не работает.

Увеличение картинки при наведении CSS (hover)

Пример увеличения картинки при наведении CSS (hover). Для изменение масштаба добавлено свойство transform с функцией scale(). Свойство transition отвечает за плавное увеличение изображения, с помощью него устанавливаем время масштабирования.

Пример

HTML


<div class="hover-image-scale">
  <img src="image.jpg" alt="" class="hover-image-scale">
</div>

CSS


.hover-image-scale {
  display: inline-block; 
  overflow: hidden; /* Скрываем всё за контуром */
}
.hover-image-scale img {
  transition: 1s; /* Время эффекта */
  display: block; 
}
.hover-image-scale img:hover {
  transform: scale(1.2); /* Увеличиваем масштаб */
}

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

Этот простой hover эффект CSS для картинок может пригодиться при создании галереи из картинок. Цвет при наведении можно подобрать под стилистику вашего сайта.

Пример

HTML


<div class="hover-image-gallery">
  <a href="image.jpg"> <!-- ССылка на изображение -->
    <img src="image-thumbnail.jpg" alt="" /> <!-- Миниатюра изображения -->
  </a>
</div>

CSS


.hover-image-gallery a {
  display: inline-block;
  background: #ff921e; /* Меняем цвет на свой */ 
  line-height: 0;
}
.hover-image-gallery a img {
  transition: filter 0.5s linear;
  filter: brightness(2) grayscale(1) opacity(0.5);
}
.hover-image-gallery a:hover img {
  filter: none;
}