ZorNet.Ru — сайт для вебмастера » HTML и CSS » Появление описание при наведении HTML + CSS

Появление описание при наведении HTML + CSS

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

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

1. При открытии страницы или при заходе на интернет площадку.

Выдвигающееся описание при наведении HTML/CSS

Выдвигающееся описание при наведении HTML/CSS

2. Здесь уже задействована анимация и появлением текста.

Появление текста при наведении курсора

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

HTML

Код

CSS

Код

.compeivates-kasopen {
  width: 273px;
  margin: 100px auto;
  padding: 15px;
  background: #efeded;
  box-shadow: 0 0 2px #1f1e1e;
  height: 305px;
}

.keasonab-molemetan {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  height: 305px;
}

.keasonab-molemetan img {
  display: block;
  max-width: 100%;
  transition: transform 0.5s ease;
}

.keasonab-molemetan:hover img {
  transform: translateX(100%);
}

.keasonab-molemetan::before,
.keasonab-molemetan::after {
  position: absolute;
  width: 100%;
  background: #3a3737;
  text-align: center;
  box-sizing: border-box;
  z-index: -1;
  transition: transform 0.5s ease-in-out;
  transform: translateX(-80px);
}

.keasonab-molemetan::before {
  content: attr(data-title);
  height: 30%;
  padding: 30px;
  color: #e8e5e5;
  font-size: 19px;
  font-weight: bold;
}

.keasonab-molemetan::after {
  content: attr(data-description);
  top: 30%;
  height: 70%;
  padding: 0 30px;
  color: #d7bb97;
}

.keasonab-molemetan:hover::before,
.keasonab-molemetan:hover::after {
  transform: translateX(0);
}

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

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

04 Октября 2018 Просмотров: 2889 Комментариев: (4)

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

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

Kosten

Комментарии: 4
Порядок вывода комментариев: freeower 09 Апреля 2024 13:15¹ 0 Добрый день. Как можно сделать блоки чтобы были именно в ряд как на 1 верхнем скрине? -SAM- 09 Апреля 2024 14:25² 0 freeower, для этого прежде всего у сайта должен быть адаптивный каркас, а дальше вид материалов нужно разбивать на несколько колонок (пример). UPD.: это всё оффтоп, вот обсуждение на форуме (вместо 50% ставить 33%). freeower 09 Апреля 2024 14:50³ 0 В ряд 3 колонки допустим так: --- --- как это можно реализовать? Kosten 09 Апреля 2024 16:35⁴ 0 Да, там только ширину нужно под другие цифры ставить.