CSS: Div aparecer quando passar mouse em cima (hover)

O CSS nos permite coisas que nem imaginamos, desde estilização até animações. O recurso que vou ensinar agora substitui muito bem o uso de scripts, e é feito inteiramente com HTML e CSS! É aquele famoso efeito de quando você passar o mouse em cima de um elemento, outro aparece. Muito usado em comentários de links, descrições, anúncios etc. Enfim use-o como quiser!

Veja o exemplo a seguir:

Passe o mouse aqui!

Esse é um comentário.

1 - HTML: Criar elementos
Obviamente, precisamos criar os elementos em HTML antes de tudo.
IMPORTANTE: A DIV COMENTÁRIO DEVE ESTAR DENTRO DA DIV ONDE VAI SE PASSAR O MOUSE!
Segue o código:

<div id="exemplo">
<div id="mouse"> Passe o mouse aqui!
<div id="comentario"> Esse é um comentário. </div>
</div>
</div>

2 - CSS: Estilizar elementos
Agora precisamos fazer com que os elementos "ganhem vida". O código a seguir é referente ao exemplo que dei aqui, mas você pode atribuir as propriedades que quiser, desde que obedeça as seguintes regras:

- Como dito, a div comentário deve estar dentro da que vai passar o mouse;
- A div comentário deve ter inicialmente, uma opacidade 0 (para o efeito de transição);
- Não é obrigatório, mas é bom o uso de transition;
- Recomendo que use position relative na div comentário. (Clique aqui para saber mais);

Código:

#exemplo{
width:90%;
height:auto;
padding:10px;
background:#d3d3d3;
position:relative;
}
#mouse {
width:200px;
height:100px;
fonte-size:16px;
background:#abcdef;
position: relative;
top: 5px;
left:50px;
line-height:100px;
}
#comentario {
position:relative; top:-80px;
left:170px;
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;
}

3 - CSS: Fazer aparecer

Por último, temos que fazer com que de fato funcione. É bem simples, apenas dizemos ao CSS que quando passarmos o mouse em cima(:hover) de #mouse, o #comentario terá uma opacidade 1.

Adicione o código logo abaixo do código anterior:

#mouse:hover #comentario{
opacity: 1;
}

E é isso ai! Está prontinho e funciona em qualquer navegador!Gostaram? Qualquer dúvida comentem aqui em baixo.

Não esqueçam de compartilhar e blá, blá ,blá ...E não plagiar e blá, blá blá...