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

Hover эффект для изображение с названием

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

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

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

Так по умолчанию идет:

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

Здесь наведен клик:

Интересные hover эффекты: для изображений

Первый вариант:

HTML

Код

<figure>
  <div class="bukopasd-kegavun">
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/15743.jpg" alt="zornet.ru">
  <figcaption>
  <h3>ZorNet - портал для вебмастера</h3>
  </figcaption>
  </div>
</figure>

CSS

Код

*{box-sizing:border-box; margin: 0;}

figure {
  width: 500px;
  position: relative;
  overflow: hidden;
}
figure img {
  display: block;
  width: 100%;
  transition: 500ms;
  cursor:pointer;
}
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(37, 35, 35, 0.86);
  padding: 19px;
  text-align: center;
  opacity: 0;
  transform: translateY(100%);
  transition: 500ms;
  border: 1px solid #585454;
  color: #f5f5f5;
  text-shadow: 0 1px 0 #232121;
}
figure:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}
figure:hover img {
  transform: scale(1.7);
  border: 2px solid #a9a3a3;
}

.bukopasd-kegavun {
  border: 2px solid #a9a3a3;
}

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

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

Второй вариант:

Так по умолчанию идет:

Здесь наведен клик:

HTML

Код

<figure class="kabelnua vesamukad">
<img src="http://zornet.ru/_nw/8/15558973.jpg" alt="Все для веб мастера">
<figcaption>ZorNet.Ru - <a href="">портал для вебмастера</a></figcaption>
</figure>

CSS

Код

figure.kabelnua {
  width: 573px;
  margin: 28px auto;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
  cursor:pointer;
}

figure.kabelnua figcaption {
  position: absolute;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  background: rgba(239, 235, 235, 0.78);
  padding: 15px;
  z-index: 100;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  top: 50%;
  left: 0;
  -moz-transform: translate3d(-100%, -50%, 0);
  -webkit-transform: translate3d(-100%, -50%, 0);
  transform: translate3d(-100%, -50%, 0);
  opacity: 0;
  -moz-transition: all 0.7s;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
  width: 83%;
}

figure.kabelnua figcaption a {
  text-decoration: none;
}

/*** Push Up effect ****/
figure.vesamukad img {
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition: all 0.7s;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}

figure.vesamukad figcaption {
  top: 100%;
  opacity: 1;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.vesamukad:hover img {
  -moz-transform: translate3d(0, -20px, 0);
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
  opacity: .5;

}

figure.vesamukad:hover figcaption{
  -moz-transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  -moz-transition: all 0.7s;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
  box-shadow: 0px -2px 28px rgba(12, 12, 12, 0.3);
}

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

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

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

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

23 Апреля 2019 Загрузок: 2 Просмотров: 877 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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