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?
2 Respostas
Utilize o atributo title
exemplo:
<img src="caminho.jpg" title="Meu titulo fica aqui">
Tambem tem o atributo 'alt' caso a imagem não carregue ele será exibido.
Obs.: Os buscadores utilizam estes tipos de tags e atributo para Rankear seu 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>
Não sei como vc quer fazer isso, mas um exemplo de texto sobre a imagem na qual vc pode customizar o tipo, tamanho e cor seria este:
#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>
-
Moço, muito muito muitoooo obg, isso era exatamente oq eu tava precisando. Eu realmente comecei a aprender a prigramar esse ano então não sei muita coisa, vc me ajudou muito!! Commented 18/08/2017 às 0:20