Aparecer div em hover

Bom dia a todos!
Queria saber como exibir uma div ao passar o mouse em cima de uma imagem, por exemplo:

Existe uma imagem de um filme:

<a href="">IMAGEM</a>

Ao passar o mouse em cima dessa imagem, irá aparecer uma div ao lado mostrandos todos os detalhes do filme, ou seja, um resumo do filmes, e com o botão (VER MAIS).

Estou usando um exemplo assim:

<style type="text/css">
#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:0;
 line-height:100px;
 border:1px solid #000;
}
#comentario {
 position:absolute;
 top:0;
 left:170px;
 padding:2px;
 line-height:20px;
 background:#333;
 color:#fff;
 display: block;
 width:120px;
 opacity: 0;
 float:left;

 -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;
}
</style>
<div id="exemplo">
 <div id="mouse"> Passe o mouse aqui!
 <div id="comentario"> Esse é um comentário. </div>
 </div>
</div>

Mas ao passar ou mouse em cima da div (comentario) ela aparece, o certo teria que aparecer apenas se passar ou mouse em cima da div (mouse).

Obrigado a todos!!!

Até mais!