+ Ответить в теме
Показано с 1 по 3 из 3

Тема: Как вывести текст при наведении на изображение?

  1. #1
    Новичок meduza на пути к лучшему Аватар для meduza
    Регистрация
    12.10.2016
    Сообщений
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Как вывести текст при наведении на изображение?

    Всем привет. Как сделать чтобы при наведении на картинку она выводила текст?

  2. #2
    Новичок Sanya_zik на пути к лучшему Аватар для Sanya_zik
    Регистрация
    15.10.2016
    Сообщений
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    <!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> не работают.

  3. #3
    а не проще ли просто атрибут title="текст" дописать картинке ?

+ Ответить в теме

Похожие темы

  1. Ответов: 1
    Последнее сообщение: 16.11.2013, 09:01
  2. Ответов: 1
    Последнее сообщение: 17.04.2013, 21:38
  3. Изображение и текст
    от Noizer в разделе HTML
    Ответов: 12
    Последнее сообщение: 15.11.2010, 17:57
  4. Получить и вывести текст из input'a
    от Phantomix в разделе HTML
    Ответов: 3
    Последнее сообщение: 29.08.2010, 02:24
  5. Ответов: 6
    Последнее сообщение: 03.06.2009, 13:53

Метки этой темы

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения

 

Html-форум Рейтинг@Mail.ru