» »

Текст на изображение при наведении курсора

Текст на изображение при наведении курсора

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

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

Ширина и высота ящиков не определены в моем CSS или HTML-коде, они соответствуют размеру предоставленного изображения. Если изображение слишком велико, то вам нужно определить ширину по родительскому элементу.

HTML

Код
<a href="http://zornet.ru" target="blank">  
<div class="zornet_ru_kineg">  
  <img src="https://image.prntscr.com/image/G2dD7TdMQnKP1kP2fTLEiA.png" alt="ZorNet: Создание сайта на uCoz" class="vogerkas_dunomiksa">  
  <div class="fokertines_psanka">  
  <div class="zamitug_dervun">Поле Hover - это компонент с дополнительным скрытым текстовым слоем, который становится видимым при наведении и охватывает оригинальную коробку.</div>  
  </div>  
</div>  
</a>

CSS

Код
.zornet_ru_kineg,  
.zornet_ru_kineg * {  
  box-sizing: border-box;  
}  
.zornet_ru_kineg {  
  position: relative;  
  display: inline-block;  
  overflow: hidden;  
  max-width: 100%;  
  height: auto;  
}  
.zornet_ru_kineg img {  
  max-width: 100%;  
}  
.zornet_ru_kineg .vogerkas_dunomiksa {  
  display: block;  
}  
.zornet_ru_kineg .fokertines_psanka {  
  opacity: 0;  
  position: absolute;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  width: 100%;  
  height: 100%;  
  background: rgba(12, 12, 12, 0.68);  
  color: #f9f3f3fa;  
  padding: 15px;  
  -moz-transition: all 0.4s ease-in-out 0s;  
  -webkit-transition: all 0.4s ease-in-out 0s;  
  -ms-transition: all 0.4s ease-in-out 0s;  
  transition: all 0.4s cubic-bezier(0.42, 0, 0.42, 0.9) 0s;  
}  
.zornet_ru_kineg:hover .fokertines_psanka,  
.zornet_ru_kineg.active .fokertines_psanka {  
  opacity: 1;  
}  
.zornet_ru_kineg .zamitug_dervun {  
  text-align: center;  
  font-size: 18px;  
  display: inline-block;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  -moz-transform: translate(-50%, -50%);  
  -webkit-transform: translate(-50%, -50%);  
  -ms-transform: translate(-50%, -50%);  
  transform: translate(-50%, -50%);  
}  
.zornet_ru_kineg .zamitug_dervun_mobile {  
  font-size: 15px;  
  border-top: 1px solid rgb(179, 179, 179); /* for old browsers */  
  border-top: 1px solid rgba(179, 179, 179, 0.7);  
  margin-top: 5px;  
  padding-top: 2px;  
  display: none;  
}  
.zornet_ru_kineg.active .zamitug_dervun_mobile {  
  display: block;  
}

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

Демонстрация:
17.12.2017 Просмотров: 386 Комментарий: (2)

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

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

Комментарий: 2
Kosten
Kosten 17.12.2017 15:341
0
Подскажите, как стиль прописать при наведение, чтоб курсор появился, пробовал, что то не получилось, как понимаю, этот стиль отвечает.

style="cursor:pointer;"
Kosten
Kosten 17.12.2017 15:432
0
Все понял, почему клика при наведение не было, просто не заметил. что под ссылку на переход в коле не прописал, вообщем так идет.

Код
<a href="http://zornet.ru" target="blank">
<div class="zornet_ru_kineg">
  <img src="https://image.prntscr.com/image/G2dD7TdMQnKP1kP2fTLEiA.png" alt="Mountains" class="vogerkas_dunomiksa">
  <div class="fokertines_psanka">
  <div class="zamitug_dervun">Поле Hover - это компонент с дополнительным скрытым текстовым слоем, который становится видимым при наведении и охватывает оригинальную коробку.</div>
  </div>
</div>
</a>
avatar