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.

[diurno10]

Me parece que tenes un problema de estilos , yo le quite el padding-top 40px y funciona bien.

[mauritosuarez]

Hola juandedios, también probé el código y funciona ok sacando el padding-top: 40px; como dice diurno10.

Saludos.

[juandedios]

Que raro, se lo quite y sigue funcionando igual. Es un dolor de cabeza.

[diurno10]

limpiaste cache?

[juandedios]

Si limpie cache y ahora si funciona por 2 veces, a la tercera vez que quiero pasar el mouse solo funciona de la mitad de la imagen para abajo.

No tendrá que ver que estoy poniendo las dimensiones en porcentaje? width: 100%; height: 100%;

[diurno10]

No che, a mi me funciona siempre, en que navegador lo estas probando?