Плавающие теги изображения

Здесь у меня есть веб-сайт weebly, но я пытаюсь создать свой собственный веб-сайт и внедрить некоторые функции веб-сайта weebly в свой собственный.

Мне было интересно, как называется эта функция и как я буду ее реализовывать:

Анимированный скриншот

Как вы можете видеть, когда вы наводите курсор на изображение, появляется небольшой плавающий тег, и мне просто интересно, может ли кто-нибудь сказать мне, что это такое и как я могу реализовать его в своем коде:

Вот код:

HTML

<div id="staff_images">
<center>
<img src="images/GR412.png" />
<img src="images/JoeVis.png" />
<img src="images/Scott.png" />
<img src="images/Halo.png" />
</center>
</div>

person Community    schedule 24.10.2014    source источник
comment
добавьте title=" " к своим изображениям... с именем внутри " "   -  person C Travel    schedule 24.10.2014
comment
Кажется, не работает, это правильно? ‹img src=images/GR412.png title=GR412 /›   -  person    schedule 24.10.2014
comment
<center>?! Действительно???   -  person j08691    schedule 24.10.2014
comment
@Grant Проверьте мой ответ и нажмите на демонстрацию, вы увидите, что при наведении курсора вы получаете название изображений, указанное в заголовке.   -  person C Travel    schedule 24.10.2014
comment
Да, тег не появляется над изображением, как в GIF, который я разместил. Это все еще просто статичное изображение.   -  person    schedule 24.10.2014


Ответы (1)


Добавьте title=" " к своим изображениям... с именем внутри " ". Это должно сработать.

Нравится:

<img src="images/GR412.png" title="GR412" />
<img src="images/JoeVis.png" title="JoeVis" />
<img src="images/Scott.png" title="Scott" />
<img src="images/Halo.png" title="Halo" />

ДЕМО

person C Travel    schedule 24.10.2014
comment
Ах, я не добавил CSS, дайте нам минуту - person ; 24.10.2014
comment
Я добавил этот код CSS, и над изображением не появляется тег. #staff_images img title {width:100px; высота: 100 пикселей;} - person ; 24.10.2014
comment
@Grant - основная подсказка покажет вам, используя ответ C travels. Если вы хотите применить свой собственный стиль, см. этот вопрос здесь. Вам нужно будет применить стиль к элементу обертки вокруг каждого изображения, например <a> - person misterManSam; 24.10.2014
comment
в каком браузере тестируете? и вы не можете использовать css с моим ответом, чтобы сделать его больше или что-то в этом роде... - person C Travel; 24.10.2014
comment
Боже мой, я такой тупой, я забыл подержать его где-то 2 секунды. Мне так жаль. Ваш ответ работает, спасибо! - person ; 24.10.2014
comment
Нет проблем ;) рад помочь! - person C Travel; 24.10.2014