Imageoverlay jQuery – Mostrar etiquetas al pasar el ratón

Name: Imageoverlay jQuery – Mostrar etiquetas al pasar el ratón
Brand: Jose Aguilar
SKU: joseaguilarblog-3933
Availability: InStock
Rating: 5 (6 reviews)

En este artículo vamos a ver como mostrar etiquetas o texto relacionado con una imagen al pasar el ratón por encima de esta.

El plugin Imageoverlay de jQuery nos permite mostrar diferentes etiquetas cuando se pasa el raton por encima de cualquier foto o imagen. Es ideal para sitios en los que no se cuenta con demasiado espacio y se quiera lograr un diseño más limpio.

Para añadir esta funcionalidad a tu Web deberás descargar el plugin y añadirlo al <head> de tu página junto con la librería jQuery:

<link rel="stylesheet" media="screen" type="text/css" href="ImageOverlay.css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jquery.ImageOverlay.js"></script>

Dentro del <body> de tu página podrías tener una lista de imágenes:

<ul id="firstGallery" class="image-overlay">
    <li>
        <a href="https://www.jose-aguilar.com">
            <img alt="Palm Tree" src="testImages/palmtree.jpg"/>
            <div class="caption">
                <h3>Write a Title Here</h3>
                <p>Put a Caption Here</p>
            </div>
        </a>
    </li>
    <li>
        <a href="https://www.jose-aguilar.com">
            <img alt="Iguana" src="testImages/iguana.jpg"/>
            <div class="caption">
                <h3>Another Title</h3>
                <p>click for more info</p>
            </div>
        </a>
    </li>
    <li>
        <a href="https://www.jose-aguilar.com">
            <img alt="Ceynote" src="testImages/ceynote.jpg"/>
            <div class="caption">
                <h3>Just a Title Here</h3>
            </div>
        </a>
    </li>
</ul>

Y ahora solo falta añadir la llamada al plugin justo antes de la etiqueta de cierre </body>.

<script type="text/javascript">
$("#firstGallery").ImageOverlay();
</script>

Podríamos realizar la llamada al plugin con algunas opciones:

$("#myGallery").ImageOverlay({
      border_color: "#FF8000",
      overlay_color: "#610B38",
      overlay_origin: "top",
      overlay_text_color: "#FF8000",
      overlay_speed: 'fast',
      overlay_speed_out : 'slow'
});

Ver ejemplos en funcionamiento

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(6 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

2 respuestas a “Imageoverlay jQuery – Mostrar etiquetas al pasar el ratón”

Ariel dice:

29/08/2013 a las 3:14

Falta el Class «caption» en el DIV, sin esto no funciona

Another Title
click for more info

Por lo demas, muy util 😉

Responder
- cesar dice:
  
  23/07/2014 a las 21:07
  
  Hola Ariel, disculpa, lei tu comentario, a que te refieres cuando dices: falta el Class “caption” en el DIV,implemente en mi pagina y no me sale, por favor me podrias ayudar, muchas gracias, saludos.
  
  Responder