SummArg | Cursos y recursos para webmasters

03/03/2012

jQuery ContentHover: Desplegar contenido HTML al pasar el puntero del mouse sobre cualquier elemento

Un plugin para jQuery realmente liviano y genial. Permite establecer una animación sobre un elemento cuando entra en estado hover con efectos fade o slide. Funciona para aplicar sobre imágenes o cualquier contenedor que le indiquemos y despliega en su interior cualquier código HTML que coloquemos.

Para implementarlo en un proyecto web primero debemos descargar el archivo y vincularlo a nuestro documento junto con jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="scripts/jquery.contenthover.js"></script>

Luego añadimos una imagen y el contenido que se desplegará con nuestro plugin.

<img id="d1" src="photos/1.jpg" width="300" height="240" />
<div class="contenthover">
<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>

Pasamos los parámetros a ContentHover.

<script type="text/javascript">
$('#d1').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
</script>

Y finalmente damos un poco de estilo vía CSS.

.contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3, contenthover a { color:#fff; }
.contenthover h3, .contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; }
.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.contenthover a.mybutton:hover { background:#34742d }

Y listo! Pueden descargar el plugin y revisar su documentación desde www.backslash.gr/demos/contenthover-jquery-plugin/

Dejar un comentario

  1. jessica servin

    Hola:
    Estoy creando mi pagina en WordPress, pero para los menús desplegables, el software tiene las herramientas para hacerlo. Pero tengo otra duda y me gustaría que me fuese contestada.
    Quiero añadir una imagen con un texto que diga:
    QUIENES SOMOS y AL PASAR EL CURSOR sobre la imagen, se despliegue automaticamente el texto. Algo asi como: Somos el instituto de competitividad y…………..shalala shalala shalala shalala
    He buscado en tutoriales, en guias y manuales pero……………NADA.
    POR FAVOR ALGUIEN PODRIA AYUDARME A SABER COMO HACERLO POR FAVOR??????
    y si no se puede, haganmelo saber.
    GRACIAS
    espero su respuesta

Dejar un comentario