ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация при наведении изображение в CSS

Анимация при наведении изображение в CSS

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

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

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

6 вариантов hover-эффектов для изображение

Красивые эффекты изображение на CSS

В материале подготовлено несколько материалов, где идет свой оригинальный трюк, который полностью зависит от самого изображение.

Приступаем к установке:

HTML

Код
<ul>
  <li>
  <a href="#" class="businesa_kenaveprac kegechan_ceeveseing01">
  <img src="Ссылка на картинку №1">
  <img src="Ссылка на картинку №1">
  <img src="Ссылка на картинку №1">
  <img src="Ссылка на картинку №1">
  </a>
  </li>
  <li>
  <a href="#" class="businesa_kenaveprac kegechan_ceeveseing02">
  <img src="Ссылка изображение №2">
  <img src="Ссылка изображение №2">
  <img src="Ссылка изображение №2">
  <img src="Ссылка изображение №2">
  </a>
  </li>
  <li>
  <a href="#" class="businesa_kenaveprac kegechan_ceeveseing03">
  <img src="Ссылка для снимка №3">
  <img src="Ссылка для снимка №3">
  <img src="Ссылка для снимка №3">
  <img src="Ссылка для снимка №3">
  </a>
  </li>
  <li>
  <a href="#" class="businesa_kenaveprac kegechan_ceeveseing04">
  <img src="Ссылка на картинку №1">
  <img src="Ссылка на картинку №1"><img src="Ссылка на картинку №1">
  <img src="Ссылка на картинку №1"><img src="https://picsum.photos/400/300?image=664">
  <img src="Ссылка на картинку №1"><img src="Ссылка на картинку №1">
  </a>
  </li>
  <li>
  <a href="#" class="businesa_kenaveprac kegechan_ceeveseing05">
  <img src="Картинки или снимки в PNG">
  <img src="Картинки или снимки в PNG">
  <img src="Картинки или снимки в PNG">
  <img src="Картинки или снимки в PNG">
  </a>
  </li>
  <li>
  <a href="#" class="Ссылка для снимка №3">
  <img src="Ссылка для снимка №3">
  <img src="Ссылка для снимка №3">
  <img src="Ссылка для снимка №3">
  <img src="Ссылка для снимка №3">
  </a>
  </li>
</ul>

CSS

Код
@media only screen and (min-width: 600px) {
  ul {
  display: flex;
  flex-wrap: wrap;
  margin: -120px 0 0;
  padding: 0;
  list-style: none;
  }
  ul li {
  width: calc(50% - 120px);
  margin: 120px 60px 0;
  }
}
@media only screen and (min-width: 960px) {
  ul {
  margin: -120px 0 0;
  }
  ul li {
  width: calc(33.33334% - 120px);
  margin: 120px 60px 0;
  }
}

.businesa_kenaveprac {
  position: relative;
  display: block;
}
.businesa_kenaveprac {
  position: relative;
  display: block;
}
.businesa_kenaveprac img {
  width: 100%;
  vertical-align: bottom;
  transition: .3s;
}
.businesa_kenaveprac img:not(:nth-child(1)) {
  position: absolute;
  top: 0;
  left: 0;
}
.businesa_kenaveprac img:nth-child(1) {
  position: relative;
  z-index: 4;
}
.businesa_kenaveprac img:nth-child(2) {
  z-index: 3;
}
.businesa_kenaveprac img:nth-child(3) {
  z-index: 2;
}
.businesa_kenaveprac img:nth-child(4) {
  z-index: 1;
}

.kegechan_ceeveseing01:hover img:nth-child(2) {
  transform: rotate(-4deg);
}
.kegechan_ceeveseing01:hover img:nth-child(3) {
  transform: rotate(12deg);
}
.kegechan_ceeveseing01:hover img:nth-child(4) {
  transform: rotate(-12deg);
}

.kegechan_ceeveseing02:hover img:nth-child(2) {
  transform: translate(15px, -15px);
}
.kegechan_ceeveseing02:hover img:nth-child(3) {
  transform: translate(30px, -30px);
}
.kegechan_ceeveseing02:hover img:nth-child(4) {
  transform: translate(45px, -45px);
}

.kegechan_ceeveseing03 img:not(:nth-child(1)) {
  transform-origin: 50% 0;
}
.kegechan_ceeveseing03:hover img:nth-child(2) {
  transform: translateY(-15px) scale(.95);
}
.kegechan_ceeveseing03:hover img:nth-child(3) {
  transform: translateY(-30px) scale(.9);
}
.kegechan_ceeveseing03:hover img:nth-child(4) {
  transform: translateY(-45px) scale(.85);
}

.kegechan_ceeveseing04 img:nth-child(2),
.kegechan_ceeveseing04 img:nth-child(3) {
  z-index: 3;
}
.kegechan_ceeveseing04 img:nth-child(4),
.kegechan_ceeveseing04 img:nth-child(5) {
  z-index: 2;
}
.kegechan_ceeveseing04 img:nth-child(6),
.kegechan_ceeveseing04 img:nth-child(7) {
  z-index: 1;
}
.kegechan_ceeveseing04:hover img:nth-child(2) {
  transform: translateX(-30px) scale(.9);
}
.kegechan_ceeveseing04:hover img:nth-child(3) {
  transform: translateX(30px) scale(.9);
}
.kegechan_ceeveseing04:hover img:nth-child(4) {
  transform: translateX(-60px) scale(.8);
}
.kegechan_ceeveseing04:hover img:nth-child(5) {
  transform: translateX(60px) scale(.8);
}
.kegechan_ceeveseing04:hover img:nth-child(6) {
  transform: translateX(-90px) scale(.7);
}
.kegechan_ceeveseing04:hover img:nth-child(7) {
  transform: translateX(90px) scale(.7);
}

.kegechan_ceeveseing05:hover img:nth-child(1) {
  transform: rotate(5deg);
}
.kegechan_ceeveseing05:hover img:nth-child(2) {
  transform: translate(20px, -20px) rotate(9deg);
}
.kegechan_ceeveseing05:hover img:nth-child(3) {
  transform: translate(40px, -40px) rotate(13deg);
}
.kegechan_ceeveseing05:hover img:nth-child(4) {
  transform: translate(60px, -60px) rotate(17deg);
}

.kegechan_ceeveseing06 img:nth-child(1) {
  transform-origin: 0 0;
}
.kegechan_ceeveseing06 img:nth-child(2) {
  transform-origin: 100% 0;
}
.kegechan_ceeveseing06 img:nth-child(3) {
  transform-origin: 0 100%;
}
.kegechan_ceeveseing06 img:nth-child(4) {
  transform-origin: 100% 100%;
}
.kegechan_ceeveseing06:hover img {
  transform: scale(.49);
}

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

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

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

Демонстрация
29 Апреля 2019 Просмотров: 1439 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar