Text on image

Question

Hi, I’m new to this and I need to know how to make a text about the img appear when passing a mouse over it p a school project, someone can help me?

Answer 1

Use the attribute title example:

<img src="caminho.jpg" title="Meu titulo fica aqui">

You also have the alt attribute if the image does not load it will be displayed.

Note: Searchers use these types of tags and attribute to rank your site.

utilizando alt e title:<br>
<hr>

<img src="img.jpg" title="Plano de fundo" alt="Aqui tem uma imagem de plano de fundo"/><br>

<hr>
<img src="https://pbs.twimg.com/media/CBG6phyU8AA79F6.jpg" title="Plano de fundo" alt="aqui esta a imagem 2"/>
<br>

Answer 2

I don’t know how you want to do it, but an example of text on the image in which you can customize the type, size and color would be this:

#imagem{position:relative;display: inline-block;}
p{display: none;position:absolute;top:0px; left: 0px; width: 96%; padding: 2%; font-size: 20px; color: #fff;}
#imagem:hover p{display: inline-block;}

<div id="imagem">
	<img width="400" src="https://cdn.pixabay.com/photo/2016/10/22/17/46/scotland-1761292_960_720.jpg" />
    <p>Oi, eu sou nova nisso e preciso saber como fazer aparecer um texto sobre a img ao passar um mouse sobre ela p um projeto da escola, alguem pode me ajudar?</p>
</div>