jQuery ContentHover Plugin
ContentHover es un plugin de jQuery pequeño que te ayuda a mostrar un contenido oculto en la parte superior de un elemento cuando el ratón pasa por encima.
Hay opciones para elegir cómo su efecto hover al parecer, como fade in o deslizarse en cualquier dirección, puede cambiar la opacidad de la superposición, etc. Puedes ver un listado de opciones y más ejemplos.
Añadir este efecto tan interesante es muy fácil. Tan solo tienes que descargarte el plugin y añadirlo en tu <head> junto con la librería jQuery y su llamada con las opciones que te interesen.
Por ejemplo:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jquery.contenthover.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#example').contenthover({
effect:'slide',
slide_speed:300,
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
En el caso de nuestro ejemplo utilizaremos el efecto slide a una cierta velocidad y opacidad.
El código HTML necesario es el siguiente:
<img id="example" src="images/2.jpg" width="300" height="240" /> <div class="contenthover" style="display:none;"> <h3>Lorem ipsum dolor</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p> <p><a href="#" class="mybutton">Lorem ipsum</a></p> </div>
Y necesitaremos algunos estilos para la maquetación:
a:link, a:visited, a:active {
color: #3C9632;
outline: medium none;
text-decoration: none;
}
.contenthover {
padding:10px;
}
.contenthover, .contenthover h3, contenthover a {
color: #FFFFFF;
}
h3 {
color: #333333;
font-family: 'DroidSansRegular',sans-serif;
font-size: 22px;
font-weight: normal;
letter-spacing: -1px;
padding: 15px 0 0;
}
.contenthover a.mybutton {
background: none repeat scroll 0 0 #3C9632;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
display: block;
float: left;
padding: 5px 10px;
}
.contenthover a.mybutton:hover {
background: #66CC00;
}
Autor
¿Buscas trabajo de programador?
3 respuestas a “jQuery ContentHover Plugin”
Deja una respuesta
117 artículos que te podrían interesar
Ver más sobre
Hola José,
He intendado hacer esto que explicas pero algo no me funciona.
Cuando he puesto todo, el html, idéntico ha funcionado. Pero cuando he querido hacer dos fotos, una debajo de otra o al lado, solo hace el efecto en la primera. Lo que he hecho ha sido copiar varias veces el código html, pero como te digo, solo funcina en la primera, la de arriba.
He cogido el slide.
Espero que me puedas ayudar.
Gracias.
Saludos
Hola mira he estado intentando descargar el plugin pero no hay manera, te redirecciona a otra página que me imagino que sea el .js
¿tienes tu los archivos ya descargado? Me harias un gran favor. Gracias
Te los puedo enviar por email