Текст на изображение при наведении курсора
 | |
| Красивый эффект появление текста на изображение при наведение на его клик, где появится на прозрачно темном фоне, ровно по всем краям. Безусловно вы встречали такой вид на многих элементах, где присутствует картинка, что теперь можете установить у себя на интернет портале. Это может быть в колонку вид материалов, где можно вывести краткое описание статьи, вообщем, то что разместите на ресурсе, что гость или пользователь может ознакомится, да и что говорить, все стильно смотрится. Поле 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-адрес изображения и текста на верхний слой. Демонстрация: | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
