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

Красивый эффект блока с информацией на CSS

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

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

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

Так смотрится при открытии на ресурс или на страницу.

Здесь уже навели и нам показывает полностью информационное направление.

Это значение заголовка, это в какой категории, и можно кратко узнать о самом файле.

Приступаем к установке:

HTML

Код

<figure class="gedoware-devekamel"><img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/sample74.jpg" alt="ZorNet - портал для вебмастера"/>
  <figcaption>
  <h3>ZorNet.rU - портал</h3>
  <h5>Сайт для вебмастера</h5>
  <blockquote>
  <p>Здесь идет краткое описание, которая напрямую влияет на материал и поисковую систему, так как должно оригиналом от других похожих материалов.</p>
  </blockquote>
  </figcaption><a href="#"></a>
</figure>

CSS

Код

.gedoware-devekamel {
  font-family: 'Lato', Arial, sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 8px;
  min-width: 248px;
  max-width: 417px;
  width: 100%;
  background-color: #121213;
  color: #f4f4f5;
  text-align: left;
  font-size: 16px;
  box-shadow: 0 0 4px rgba(21, 20, 20, 0.18);
}
.gedoware-devekamel * {
  -webkit-transition: all 0.40s;
  transition: all 0.40s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.gedoware-devekamel img {
  max-width: 100%;
  vertical-align: top;
}
.gedoware-devekamel figcaption {
  position: absolute;
  height: 73px;
  left: 1px;
  right:1px;
  bottom: 1px;
  overflow: hidden;
  padding: 15px;
  background-color: rgba(14, 14, 14, 0.87);
}
.gedoware-devekamel h3 {
  font-family: 'Oswald';
  text-transform: uppercase;
  font-size: 21px;
  font-weight: 400;
  line-height: 24px;
  margin: 2px 0;
}
.gedoware-devekamel h5 {
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  color: #b7b1b1;
  letter-spacing: 1px;
}
.gedoware-devekamel blockquote {
  padding: 0;
  margin: 0;
  font-style: italic;
  font-size: 1em;
}
.gedoware-devekamel a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.gedoware-devekamel:hover figcaption,
.gedoware-devekamel.hover figcaption {
  height: calc(85%);
}

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

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

24 Сентября 2018 Просмотров: 1007 Комментариев: (0)

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

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

Kosten

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