Mostrar descripcion al pasar el mouse por la imagen

[juandedios]

Hola, quizás esto es algo trillado, pero no me sale como quiero. La idea es que cada vez que se pase el mouse sobre la imagen se muestre la descripcion encima de esta. Sólo me funciona una vez, cuando quiero pasar el mouse por segunda vez sobre la imagen ya no sale nada. Quizás estoy haciendo algo mal o me falta algo, les paso el código.

Código HTML:

<div id="box-important" class="row">
    <div class="col-md-4 col-sm-12">
        <div class="element">
            <a class="image" href="#" style="position:relative">
               <div class="contenthover">Texto de muestra 1</div>
               <img src="<?php echo base_url(); ?>images/important/important1.jpg" alt="Important 1" class="img-responsive">
            </a>
        </div>
    </div>
 
    <div class="col-md-4 col-sm-12">
        <div class="element">
            <a class="image" href="#" style="position:relative">
               <div class="contenthover">Texto de muestra 1</div>
               <img src="<?php echo base_url(); ?>images/important/important2.jpg" alt="Important 2" class="img-responsive">
            </a>
        </div>
    </div>
 
    <div class="col-md-4 col-sm-12">
        <div class="element">
            <a class="image" href="#" style="position:relative">
               <div class="contenthover">Texto de muestra 1</div>
               <img src="<?php echo base_url(); ?>images/important/important3.jpg" alt="Important 3" class="img-responsive">
            </a>
        </div>
    </div>
</div>
 

Código CSS:

#box-important .element {
    background: none repeat scroll 0 0 #222;
    padding: 5px;
    width: 100%;
    height: 100%;
}
 
#box-important a.image {
    display: block;
    overflow: hidden;
}
 
#box-important .contenthover {
    width:100%;
    height:100%;
    background-color: #000;
    opacity:0.7;
    position:absolute;
    top:100%;
    left:0px;
    color:#FFF;
    font-size:22px;
    text-align:center;
    padding-top:40px;
}
 

Código Javascript:

$(document).ready(function(){
    $('.image').hover(function(){
        $(this).find('.contenthover').stop().animate({top:'0px'}, 500);
    },
    function() {
        $(this).find('.contenthover').stop().animate({top:'100%'}, 500);
    });
});
 

Como verán en el html, la imagen está dentro de una etiqueta "a" y en el jquery la descripción se muestra al pasar el mouse por la etiqueta "a".

Cuando paso por primera vez, la manito que sale cuando se pasa por en enlace aparece en toda el área de la imagen, pero al pasar por segunda, tercera y etc vez la manito sale de la mitad de la imagen para abajo y sólo por ahi se puede desplegar la descripción.

Espero que me puedan ayudar.

Gracias.