• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Блок с изображением и текстом на HTML & CSS (Создание блока с текстом и картинкой при наведение на CSS)
Блок с изображением и текстом на HTML & CSS
Kosten
Дата: Вторник, 2019-05-28, 03:43 | Сообщение 1
Администраторы
Сообщений:22439
Награды: 56


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

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

Как пример по умолчанию:



Здесь при наведении:



HTML

Код
<figure>
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/0fb712e14c8d43cba226fa52c3a6e6de.png" alt="Здесь идет название картинки">
  <figcaption>
    <h3>ZorNet.Ru — интернет ресурс для вебмастеров</h3>
  </figcaption>
</figure>

CSS

Код
figure {
  width: 495px;
  position: relative;
  overflow: hidden;
}
figure img {
  display: block;
  width: 100%;
  transition: 600ms;
}
figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(208, 203, 203, 0.8);
    padding: 18px;
    text-align: center;
    opacity: 0;
    transform: translateY(100%);
    transition: 600ms;
    cursor: pointer;
}
figure:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}
figure:hover img {
  transform: scale(1.5);
}

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

Демонстрация
Прикрепления: 7398777.png(277.5 Kb) · 7187301.png(253.8 Kb) · desamutid.zip(1.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Блок с изображением и текстом на HTML & CSS (Создание блока с текстом и картинкой при наведение на CSS)
  • Страница 1 из 1
  • 1
Поиск: