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

Hover эффект при наведении HTML и CSS

В этой статье подробно описано, как создавать эффекты наведения на изображения курсора, что идет при помощи анимации и также задействовании CSS. Здесь будем использовать красивый эффект, который происходит на картинки, что размещена на веб-сайте. Плюс в том, что в этом варианте не будем использовать JavaScript для анимации, так как все полностью создано на стилистике CSS3, виде раскрывающихся шторок.

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

Изначально все проверено и по умолчанию идет в колонку на изображение:

Установка:

HTML

Код

<figure class="keginalna-animase">
  <img src="http://zornet.ru/_fr/63/4846512.jpg" alt="Скрипты на сайте zornet.ru" />
  <figcaption>
  <h3>Читать дальше</h3>
  </figcaption>
  <a href="http://zornet.ru/load/81"></a>
</figure>

<figure class="keginalna-animase">
  <img src="http://zornet.ru/_fr/63/4120204.jpg" alt="CSS" />
  <figcaption>
  <h3>Поподробнее</h3>
  </figcaption>
  <a href="http://zornet.ru/load/142"></a>
</figure>
<figure class="keginalna-animase">
  <img src="http://zornet.ru/_fr/63/9184984.jpg" alt="Вид материалов" />
  <figcaption>
  <h3>Смотреть далее</h3>
  </figcaption>
  <a href="http://zornet.ru/load/145"></a>
</figure>

CSS

Код

.keginalna-animase {
  background-color: #151414;
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  margin: 10px;
  max-width: 330px;
  min-width: 228px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}
.keginalna-animase * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.keginalna-animase:before, .keginalna-animase:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-color: #000000;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  content: '';
  opacity: 0.9;
  z-index: 1;
}
.keginalna-animase:before {
  -webkit-transform: skew(45deg) translateX(-155%);
  transform: skew(45deg) translateX(-155%);
}
.keginalna-animase:after {
  -webkit-transform: skew(45deg) translateX(155%);
  transform: skew(45deg) translateX(155%);
}
.keginalna-animase img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}
.keginalna-animase figcaption {
  top: 50%;
  left: 50%;
  position: absolute;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  -webkit-box-shadow: 0 0 10px #232222;
  box-shadow: 0 0 10px #151414;
}
.keginalna-animase h3 {
  background-color: #191616;
  border: 2px solid #f5f0f0;
  color: #f5f0f0;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
  padding: 5px 10px;
  text-transform: uppercase;
}
.keginalna-animase a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}
.keginalna-animase:hover>img, .keginalna-animase.hover>img {
  opacity: 0.5;
}
.keginalna-animase:hover:before, .keginalna-animase.hover:before {
  -webkit-transform: skew(45deg) translateX(-55%);
  transform: skew(45deg) translateX(-55%);
}
.keginalna-animase:hover:after, .keginalna-animase.hover:after {
  -webkit-transform: skew(45deg) translateX(55%);
  transform: skew(45deg) translateX(55%);
}
.keginalna-animase:hover figcaption, .keginalna-animase.hover figcaption {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

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

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

17 Октября 2019 Загрузок: 2 Просмотров: 1281 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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