ao passar o mouse na imagem aparece uma mensagem

[Reinaldo Carlos]

bom dia!

gostaria de saver como faço para que quando passar o mouse sobre a imagem aparecer uma mensagem ?

obrigado!

[JaguA]

dentro da tag TITLE

<img src="caminho/imagem.png" title="Mensagem aqui!" />

[Reinaldo Carlos]

não, não era isso!!!

é uma caixa de mensagem de verdade que aparece sobre a imagem como no site - www.samurailol.com.br

se alguém souber me avise!

obrigado!

[JaguA]

se você quer dizer onde fica os Ultimos Post onde tem as imagens menores e quando colocamos o mouse por cima aparece um fundo verde com uma escrita certo? bem se for isso não é dificil ... se for me comunique e já poste o que voce tem feito e qual a sua duvida no desenvolvimento de fazer um.

agora já te peço para que seja mais objetivo nas pergunta você fez uma pergunta cujo a resposta era exatamente acima... tente sempre detalhar o maximo possivel assim agente não passa por isso ^^...

[Reinaldo Carlos]

olá novamente!

primeiro desculpe, mas sou novo por aqui, e realmente vocês estão me ajudando muito. obrigado!

e sim, é exatamente isso que preciso, se puder me ajudar com mais esta duvida, agradeço!

[JaguA]

Segue ai um exemplo bem basico, o restante é contigo na organização cores imagens para trabalhar e deixar mais bacana.

Dexei comentado o CSS todo para facilitar ... qualquer duvida diga ae.

<style type="text/css">

*{margin:0;padding:0;border:0;list-style:none;outline:none;} /* Fazendo reset */
body{font:normal 14px Tahoma, Arial, sans-serif;color:#333;background:#e5e5e5} /* Fonte normal tamanho 14 tenho Tahoma como fonte primaria */
a{text-decoration:none;} /* Links sem efeitos */

/* Carecteristicas da div. */
#content {
border: 1px solid green;
width: 55%;
height: 60%;

}
/* Carecteristicas de tudo que esta dentro da Div e com Link */
#content ul li a{
display:block;
position:relative;
font-size:12px;
margin:0 auto;
padding: 10px;
float:left;
}

/* Efeitos do texto */
#content ul li a span{
display:block;
padding:10px;
color:#f00;
position:absolute;
bottom:0;
left:0;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
opacity:0;
-moz-opacity:0;
filter:alpha(opacity=0);
}

/* Efeitos do texto quando o mouse estive em cima da Imagem */ 
#content ul li:hover span{
border: 1px solid f00;
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
}



#content ul li a img{ /* Tamanho da imagem na DIV */
width:320px;
height:240px;

}

#content ul li a span{ /* Espaço da mensagem que ira aparecer */
width:300px;
padding-bottom: 20px;
padding-left: 20px;
}


</style>

    
            <div id="content">
                    <ul>
                <li >
                    <a href="#">
                        <img src="image.jpg" class="attachment-thumbnail wp-post-image" alt="Imagem" title="" />                        
                        <span>Mensagem que deve aparece com o mouse em cima.</span>
                    </a>
                </li>
                
                                <li >
                    <a href="#">
                        <img src="image.jpg" class="attachment-thumbnail wp-post-image" alt="Imagem" title="" />                        
                        <span>Mensagem que deve aparece com o mouse em cima.</span>
                    </a>
                </li>
                
                                <li >
                    <a href="#">
                        <img src="image.jpg" class="attachment-thumbnail wp-post-image" alt="Imagem" title="" />                        
                        <span>Mensagem que deve aparece com o mouse em cima.</span>
                    </a>
                </li>
                
                                <li >
                    <a href="#">
                        <img src="image.jpg" class="attachment-thumbnail wp-post-image" alt="Imagem" title="" />                        
                        <span>Mensagem que deve aparece com o mouse em cima.</span>
                    </a>
                </li>
                
                
                </ul>

Editado Abril 4, 2012 por JaguA