CSS - img:hover

[Gabriel Belgamo 0]

Olá pessoal, bom, desde já gostaria de agradecer a atenção de vocês em estar lendo meu tópico. Bom, estou produzindo um site mas ainda sou iniciante em programação. Tentei colocar no banner, ao lado do título, uma imagem de uma carta, e quando a pessoa passa o mouse em cima ela mostra um comentário/legenda. Até aí tudo bem. Está tudo funcionando. Porém, se eu passar o mouse na área que a legenda aparece ela também aparece. Por exemplo, eu passei o mouse em cima da carta, mostrou a legenda, muito bem, funcionou. Mas se eu passar o mouse na área em que a legenda é mostrada, ela aparece do mesmo jeito..! Como resolver isto? Só quero que a legenda apareça quando passar o mouse em cima da carta. Está aqui meu código.

Parte do HTML
<div id="mouse"><a href="contact_form.php"><img id="contato_img" src="img/contato_img.jpg"></a><div id="comentario"> Envie-nos uma mensagem. </div></div>


Parte do CSS#mouse {
 position: relative;
 width: 60px;
 height: 40px;
 top: -45;
 left: 28.5%;
 fonte-size:16px;
 display: block;
 top: 5px;
 left:50px;
 line-height:100px;
}
#comentario {
 position:relative; 
 top:-80px;
 left:380px;
 padding:2px;
 line-height:20px;
 background:#333;
 color:#fff;
 display: block;
 width:120px;
 opacity: 0;
 -webkit-transition: all 300ms ease;
 -moz-transition: all 300ms ease;
 -ms-transition: all 300ms ease;
 -o-transition: all 300ms ease;
 transition: all 300ms ease;
}


#mouse:hover  #comentario{
      opacity: 1;


}

Obrigado!

[Marcio Campos_97905 1]

faça 2 imagens, uma com legenda e outra sem...

 

coloca o css no #img:hover.. acho que seria mais faicil =x

trocando as imagens

[Gabriel Belgamo 0]

Nossa nem pensei nisso... Ainda estou aprendendo. Mas me parece uma boa ideia e facilita muito! Obrigado Marcio!