Frase aparece ao passar o mouse sobre imagem, com Css ou só Html

Mostrarei duas formas de exibir uma frase ao passar o mouse sobre imagem, uma muito simples que só precisa da tag title usado a muito tempo no Html e outra com aparência personalizada por Css, porém, esta segunda opção necessita um bom conhecimento em Html ou muita dedicação.

Código de imagem

Primeiro o código Html simples de uma imagem com title

<img src="http://foitestado.com/images/foitestado.png" height="60" width="400" title="Blog com dicas para Blogger..." />

O código acima gera esse resultado:



Se você passar o mouse sobre a imagem verá o title, este não tem como dar estilo, as cores obedecerão o padrão do sistema operacional do usuário.

Nos códigos acima, height é a altura e width a largura.

Código de imagem e link

Agora o mesmo código acima, mas com código de link:

<a href="http://blog.foitestado.com">
<img src="http://foitestado.com/images/foitestado.png" height="48" width="320" title="Blog com dicas para Blogger..." />
</a>

O resultado:

Html para uma descrição personalizada

Acima mostrei como identificar o código de imagem e de link com imagem, agora você precisará diferenciar os códigos acima dos outros que acrescentei, que são as tags <i> a DIV e também <p> essa ultima é para um paragrafo que conterá a descrição.

Já vou avisar que não uso esse código aqui no blog pelo fato de que acho ser muito trabalhoso e eu dar mais prioridade para as postagens(textos), mas resolvi postar já que me pediram, está bastante relacionado com outros assuntos que postei e pensei que seria fácil...

Código da Imagem com link

<div class="ontext" style="width:210px;z-index:101;">
<i>
<a href="http://blog.foitestado.com">
<img src="http://foitestado.com/images/foitestado.png" height="30" width="200" title="Blog com dicas para Blogger..." />
</a>
<p>Frase que aparece ao passar o mouse na imagem com link</p>
</i>
</div>

Resultado: Se o exemplo não aparecer clique aqui



Código da Imagem sem link

Se não quiser incluir um link na imagem você poderá substituir o código do link pelas tags <em> Isso é necessário para que o efeito funcione no Internet Explorer 7

<div class="ontext" style="width:210px;z-index:102;">
<i>
<em>
<img src="http://foitestado.com/images/foitestado.png" height="30" width="200" title="Blog com dicas para Blogger..." />
</em>
<p>Frase que aparece ao passar o mouse na imagem sem link</p>
</i>
</div>

Resultado:



Detalhes importantes, a DIV deverá ter no minimo 6 pixeis a mais de largura que a imagem podendo ser 10px a mais o ideal, lembrando que a largura é width. Observe com atenção os valores de largura, width

Se você adicionar varias imagens(códigos igual acima) e, uma logo abaixo da outra(próximas), o código de baixo deve conter um z-index com valores maiores de 100

Efeito Css: Descrição aparece ao passar o mouse

Para o efeito de texto surgir ao passar o mouse é preciso adicionar um código Css no Html página entre as HEAD, em arquivo externo(folha Css) ou, no caso do blogger veja aqui onde adiciona Css. Importante, o código riscado, em alguns casos não deve ser usado, por exemplo, para quem vai adicionar ao blogger, em folha de estilo ou se já tem em seu Html.

Código Css

<style type='text/css'>
.ontext{font-size:12px;background:transparent;position:relative;border:#000000 1px solid;text-align:center;}
.ontext i p{display:none;}
.ontext i:hover p{cursor:default;margin:-2px 0 0 0;color:blue;background:#E6E6E6;
position:absolute;text-align:left;left:-1px;z-index:100;display:block;border:#000000 1px solid;border-top:0;width:96%;padding:2px 2%;font-style:normal;}
.ontext a img{text-decoration:none;} 
.ontext a,.ontext img a,.ontext em{display:block;} 
.ontext p a{display:inline;}
.ontext i img{border:0;margin:3px 0 2px 0;}
</style>

Personalizar o código Css:

Algumas coisas você provavelmente irá querer mudar, é possível mudar a cor da fonte e fundo desta descrição, assim como cor da borda, a imagem não terá borda, mas a DIV terá, e, isso fará parecer que a imagem tem borda.

No código acima onde está background:transparent; é o fundo por trás da imagem, você pode substituir transparent por uma das cores básicas escrita em inglês ou um código de cor Hexadecimal, veja alguns aqui.

O tamanho da fonte está em font-size:12px; e você pode diminuir ou aumentar o número para obter letra maior ou menor.

Também onde tiver border:#000000 você pode substituir #000000 por outro código de cor Hexa ou nome de cor em inglês

A cor da fonte está em color:blue e você pode substituir blue por outro nome de cor em inglês ou um código Hexa, como este para preto #000000

Também no código Css acima, onde está background:#E6E6E6; é a cor de fundo do paragrafo com frase que aparecerá ao passar o mouse sobre a imagem, você também pode substituir o código Hexa #E6E6E6 que é para cor cinza claro.

Finalizando, na verdade usei a propriedade display:none do Css para oculta a frase que só ficará visível ao passar o mouse na imagem. Por está frase estar oculta, é bom não abusar de seu tamanho, pois, se a mesma aparecer em resultados de busca, vai trazer pessoas a seu blog/site que querem ler ela e não irão ver a mesma a menos que passem o mouse nas imagens, isso pode ser ruim para quem está com pressa.

• Texto e imagem sobre imagem e Div com Html e Css
• Mudar tamanho e cor do título dos gadget
• Tipo de fonte para blog e site com css e html
• Estilo das postagens do BlogSpot com Css
• Mudar fundo, fonte e cores do gadget do BlogSpot
• Aparência de comentário do autor no Blogger
• Mudar cores e fundo do título do post do BlogSpot
• Fazer menu css online, muda cor, Drop-Down