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

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

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

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

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

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

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

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

HTML

Код

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 Просмотров: 1354 Комментариев: (0)

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

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

Kosten

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