ZorNet.Ru — сайт для вебмастера » HTML и CSS » Разные hover эффекты для миниатюр на CSS

Разные hover эффекты для миниатюр на CSS

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

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

Четыре варианта наведение заголовка:

Оригинальные hover-эффекты для картинок на чистом CSS

Миниатюра с появлением заголовка в HTML + CSS

Установка:

HTML

Код

<figure class="card info-bottom">
  <img src="http://zornet.ru/_fr/79/s2583309.jpg" alt="" />
  <figcaption>
  <span class="info">
  <h3>Заголовок</h3>
  <span>Описание</span>
  </span>
  </figcaption>
  </figure>

  </div>
  <div class="col-sm-6">

  <figure class="card info-top">
  <img src="http://zornet.ru/_fr/79/s9468064.jpg" alt="" />
  <figcaption>
  <span class="info">
  <h3>Заголовок</h3>
  <span>Описание</span>
  </span>
  </figcaption>
  </figure>

  </div>
  <div class="col-sm-6">

  <figure class="card info-left">
  <img src="http://zornet.ru/_fr/79/s3126408.jpg" alt="" />
  <figcaption>
  <span class="info">
  <h3>Заголовок</h3>
  <span>Описание</span>
  </span>
  </figcaption>
  </figure>

  </div>
  <div class="col-sm-6">

  <figure class="card info-right">
  <img src="http://zornet.ru/_fr/79/s5894931.jpg" alt="" />
  <figcaption>
  <span class="info">
  <h3>Заголовок</h3>
  <span>Описание</span>
  </span>
  </figcaption>
  </figure>

CSS

Код

figure.card * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
figure.card {
  position: relative;
  max-width: 100%;
  display: inline-block;
  border: 6px solid #BFE2FF;
  background: #BFE2FF;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
  overflow: hidden;
  margin: 15px 0;
  font-size: 0;
}
figure.card img {
  transition: all 300ms;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
figure.card:hover img {
  transition: all 700ms;
  transform: scale(1.1);
}
figure.card figcaption {
  position: absolute;
  background: #BFE2FF;
  transition: transform 300ms;
  padding: 12px;
}
figure.card:hover figcaption {
  transform: translateY(0);
}
figure.info-bottom:hover img {
  top: -40px;
}
figure.info-bottom figcaption {
  bottom: 0;
  transform: translateY(100%);
  border-top: 6px solid #BFE2FF;
}
figure.info-top:hover img {
  top: 40px;
}
figure.info-top figcaption {
  top: 0;
  transform: translateY(-100%);
  border-bottom: 6px solid #BFE2FF;
}
figure.info-bottom figcaption,
figure.info-top figcaption {
  width: 100%;
}
figure.info-left:hover img {
  left: 90px;
}
figure.info-left figcaption {
  left: 0;
  top: 0;
  transform: translateX(-180px);
  border-right: 6px solid #BFE2FF;
}
figure.info-right:hover img {
  left: -90px;
}
figure.info-right figcaption {
  right: 0;
  top: 0;
  transform: translateX(180px);
  border-left: 6px solid #BFE2FF;
}
figure.info-left figcaption,
figure.info-right figcaption {
  width: 180px;
  height: 100%;
}
figure.card figcaption .info span {
  font-size: 13px;
  font-family: Verdana, sans-serif;
  display: block;
}
figure.card figcaption .info h3 {
  font-size: 18px;
  display: inline-block;
  font-weight: normal;
  font-family: 'Roboto Condensed', sans-serif;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #337AB7;
}

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

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

15 Февраля 2021 Загрузок: 4 Просмотров: 1006 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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