ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация при наведении hover-эффект CSS3

Анимация при наведении hover-эффект CSS3

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

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

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

HTML

Код

<div class="abecause_certainlyn">
  <img class="kaudefi_nitelys" src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/Rfc2u6QfT76Y27evAvNEVg.png" alt="">
  <div class="easytuni_cigaretolsag">
  <h2>Скрипты на zotner.ru</h2>
  <a class="pembarra_sedogzam" href="http://zornet.ru/load/142">Переход</a>
  </div>
  </div>

CSS

Код

.abecause_certainlyn {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.abecause_certainlyn .easytuni_cigaretolsag {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  background-color: rgba(27, 25, 25, 0.65);
  -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0.35, 1.4);
  transition: all 0.4s cubic-bezier(0.88, -0.99, 0.37, 1.43);
}

.abecause_certainlyn img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0.33, 1.4);
  transition: all 0.4s cubic-bezier(0.88, -0.99, 0.36, 1.42);
}

.abecause_certainlyn h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  background: rgba(25, 24, 24, 0.73);
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
  -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0.44, 1.36);
  transition: all 0.4s cubic-bezier(0.88, -0.99, 0.44, 1.44);
  padding: 10px;
}

.abecause_certainlyn a.pembarra_sedogzam {
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  color: #f7f2f2;
  border: 1px solid #fff;
  background-color: rgba(29, 28, 28, 0);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.16, 0.89);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.24, 0.83);
  margin: 50px 0 0;
  padding: 8px 15px;
}

.abecause_certainlyn a.pembarra_sedogzam:hover {
  box-shadow: 0 0 6px #f9ecec;
}

.abecause_certainlyn:hover img {
  -ms-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

.abecause_certainlyn:hover .easytuni_cigaretolsag {
  opacity: 1;
  filter: alpha(opacity=100);
}

.abecause_certainlyn:hover h2,.abecause_certainlyn:hover a.pembarra_sedogzam {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-transform: translatey(0);
  -webkit-transform: translatey(0);
  transform: translatey(0);
}

.abecause_certainlyn:hover a.pembarra_sedogzam {
  -webkit-transition-delay: .2.1s;
  transition-delay: .2.1s;
}

Чтоб понять, как все производится, то будет ниже Demo и снимки при работе.

По умолчанию:

Это когда навели курсор:

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

Демонстрация:

15 Января 2018 Просмотров: 1731 Комментариев: (0)

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

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

Kosten

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