Помощник
|
Как вывести текст при наведении на изображение? |
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="текст" дописать картинке ?
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
SEO-текст на главной странице сайта и в категориях | 5 | boltuk | 1352 | 26.3.2024, 21:43 автор: c4p1t4l15t |
|
Большие ставки для кликов в Я.Директ. Как удешевить? | 2 | rownong27 | 1119 | 26.3.2024, 14:13 автор: knezevolk |
|
Как вы бросили работу и перешли на заработок с сайтов? | 12 | uahomka | 2289 | 25.3.2024, 6:52 автор: Skyworker |
|
Как отозвать банковский платеж фрилансеру? | 28 | metvekot | 3912 | 25.3.2024, 6:34 автор: Skyworker |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 23 | freeax | 3637 | 24.3.2024, 20:55 автор: Liudmila |
Текстовая версия | Сейчас: 28.3.2024, 21:47 |