Помощник
|
Как вывести текст при наведении на изображение? |
meduza_hb
|
Сообщение
#1
|
||
|
|
||
|
|||
Sanya_zik |
15.10.2016, 21:29;
Ответить: Sanya_zik
Сообщение
#2
|
|
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { position: relative; width: 544px; height: 184px; background-color: #eee; margin: 0 auto; } span { display: none; position: absolute; width: 100%; height: 20px; bottom: 0; text-align: center; color: #eee; background-color: rgba(0, 0, 0, .5); } img:hover + span { display: block; } </style> </head> <body> <div> <img src="https://www.google.com.ua/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""> <span>Какой-то текст</span> </div> </body> </html> Скопируйте в блокнот, сохраните как index.html и запустите в браузере. При наведении будет появляться span с текстом "Какой-то текст". Если вы что-то другое имели ввиду, уточните. P.S. Псевдо-элементы ::after и ::before на <img> не работают. |
|
|
x-line |
18.10.2016, 21:22;
Ответить: x-line
Сообщение
#3
|
|
а не проще ли просто атрибут title="текст" дописать картинке ?
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Как в пушсетках покупают по 100-200 тысяч кликов за день? | 2 | Boymaster | 676 | Вчера, 17:52 автор: Boymaster |
|
Как вы отдыхаете от работы за компом | 151 | adw-kupon.ru | 19851 | 23.4.2024, 13:52 автор: Vmir |
|
Как вы бросили работу и перешли на заработок с сайтов? | 20 | uahomka | 3461 | 23.4.2024, 11:54 автор: Skyworker |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 30 | freeax | 5031 | 20.4.2024, 16:49 автор: Liudmila |
|
Арбитражники, как ведете учет расходов и доходов? | 13 | Boymaster | 2032 | 20.4.2024, 15:06 автор: Boymaster |
Текстовая версия | Сейчас: 25.4.2024, 3:52 |