Content Hover Me con jQuery
En este artículo vamos a ver una forma sencilla de conseguir el efecto que tras pasar el ratón por encima de una imagen aparezca desde abajo información relacionada utilizando jQuery Animation.
Tal como muestra la imagen la idea es que aparezcan imágenes de productos o servicios y que al pasar el ratón por encima se desplegue para arriba ese panel azul con opacidad que vemos en la imagen de la izquierda con contenido informativo dentro.
Por ejemplo, se me viene a la cabeza añadir este efecto en una tienda virtual en los productos destacados de la página inicial donde podríamos mostrar tan solo la imagen del producto y al pasar el ratón por encima aparezca su título, precio y un botón de añadir a la cesta.
Para añadir este efecto necesitaremos añadir en el <head> de nuestra página algunos estilos:
.element {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E5E5E5;
height: 222px;
padding: 2px;
width: 220px;
float:left;
margin-left:10px;
}
a.image {
display: block;
overflow: hidden;
}
.contenthover {
width:220px;
height:182px;
background-color: #0099CC;
opacity:0.7;
position:absolute;
top:222px;
left:0px;
color:#FFFFFF;
font-size:22px;
text-align:center;
padding-top:40px;
}
Donde el secreto está en la clase «contenhover» donde están los atributos del contenido escondido que se desliza hacia arriba al hacer hover en la imagen. A la hora de implementarlo deberás tener especial atención a los anchos y altos de tus imágenes además del top y left.
También deberemos añadir la librería jQuery y los scripts necesarios:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.image').hover(function(){
$(this).find('.contenthover').stop().animate({top:'0px'}, 500);
},
function() {
$(this).find('.contenthover').stop().animate({top:'222px'}, 500);
});
});
</script>
Como vemos el documento espera a que el usuario pase el ratón por encima de alguna imagen. Al pasar por encima de una de las imágenes buscamos el elemento con class=»contenthover» y lo animamos para que suba al top.
Y ahora solo falta ver el código HTML:
<div class="element"> <a class="image" href="#" style="position:relative"> <div class="contenthover">Texto de muestra 1</div> <img src="images/image1.jpg" width="220" height="222"> </a> </div>
Este efecto lo podrás ver mejor en un ejemplo en funcionamiento.
Autor
¿Buscas trabajo de programador?
7 respuestas a “Content Hover Me con jQuery”
Deja una respuesta
152 artículos que te podrían interesar
Ver más sobre
como se implementa en prestashop 1.5?
Buena pregunta! Lo podrías implementar para las categorías o productos tocando la maquetación de la plantilla (.css y .tpl) y añadir e incluir los scripts necesarios en el mismo tpl
loco no me funciona paso el mouse y no aparece el panel, que puede ser?
Si pero no anda genio!!
Hola muy bueno pero no me anda no falta el script jquery.js no me aparece ese panel azul. me podrias pasar el codigo completo. Gracias Saludos.
El código completo lo tinenes en el tutorial. La cuestión es aprender!
Gracias!!! justo andaba buscando algo así