Text on image [duplicate]

Navigation
4

Hi, I'm new to this and I need to know how to make a text appear on the img by hovering a mouse over it for a school project, can anyone help me?

    
asked by anonymous 12.08.2017 / 02:41

2 answers

4

I do not know how you want to do this, but an example of text about 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>
    
12.08.2017 / 03:09
6

Use the title example attribute: 

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

It also has the 'alt' attribute if the image does not load it will be displayed.

Note: Search engines 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>
    
12.08.2017 / 02:46
Select Active Lot Delete a macro using another