» »

Стильный hover-эффект для изображений на CSS3

Стильный hover-эффект для изображений на CSS3

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

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

Вы больше всего могли видеть на модуле картинок или в новостном блоге, где органично вписывается под любую стилистику и есть доступ под редактирование всей палитры цвета, так как все исполнено на чистых стилях.

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

HTML

Код
<div class="kadruzorn_rlimubagum">
  <img class="img" src="http://zornet.ru/Aben/ABGDA/zornet_ru/UErs89M1SdujIXI6Gjzbkw.png" alt="">
  <div class="garmoro_sarunim">
  <h2>ZORNET.RU - Скрипты для uCoz</h2>
  <a class="nusalim_gersa" href="http://zornet.ru/load">Далее</a>
  </div>
  </div>

CSS

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

.kadruzorn_rlimubagum .garmoro_sarunim {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(35, 33, 33, 0.74);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: translate(460px, -100px) rotate(180deg);
  -ms-transform: translate(460px, -100px) rotate(180deg);
  transform: translate(460px, -100px) rotate(180deg);
  -webkit-transition: all 0.2s 0.4s cubic-bezier(0.42, 0, 0.53, 0.93);
  transition: all 0.2s 0.4s cubic-bezier(0.42, 0, 0.47, 0.82);
}

.kadruzorn_rlimubagum img {
  display: block;
  position: relative;
  -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.84, 0.91);
  transition: all 0.2s cubic-bezier(0.42, 0, 0.8, 0.96);
}

.kadruzorn_rlimubagum h2 {
  text-transform: uppercase;
  color: #f3eded;
  text-align: center;
  position: relative;
  font-size: 19px;
  padding: 8px;
  background: rgba(27, 26, 26, 0.48);
}

.kadruzorn_rlimubagum a.nusalim_gersa {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #f9f3f3;
  border: 1px solid #fff;
  margin: 47px 0 0 0;
  background-color: transparent;
  -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.kadruzorn_rlimubagum a.nusalim_gersa:hover {
  box-shadow: 0 0 3px #f7ecec;
}

.kadruzorn_rlimubagum:hover .garmoro_sarunim {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.kadruzorn_rlimubagum:hover h2 {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.kadruzorn_rlimubagum:hover a.nusalim_gersa {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

Чтоб могли сравнить с мохожем эффектом, то переходим на него, ссылка в описание.

Здесь есть возможность просмотреть в работе на демонстраций.
08.01.2018 Просмотров: 255 Комментарий: (2)

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

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

Комментарий: 2
maniacvn
maniacvn 10.01.2018 14:491
0
Кость ошибка в описании с мохожем
Kosten
Kosten 10.01.2018 15:412
0
Бывает, главное, чтоб рабочий материал, хотя всегда проверяю на правописание.
avatar