galeria-interactiva-css

Una galería interactiva nos permitirá mostrar a nuestros usuarios una pequeña descripción al lado de la imagen cuando situen el cursor encima de dicha imagen.

El método para crear esta galería es muy sencillo, su estructura es mediante listas (<ul><li></li></ul>).

El código es completamente personalizado, por lo que podremos incluir o eliminar cualquier información que queramos acerca de la imagen.

Para crear esta galería interactiva deberemos seguir estos pasos:

Incluir este código CSS en nuestro documento:

Select Code
ul#gallery, #gallery ul{
list-style-type: none;
margin: 0;
padding: 0;
}

ul#gallery&gt;li{
float: left;
padding: 10px;
margin: 10px;
width: auto;
height: auto;
border: 1px solid transparent;
}

ul#gallery&gt;li ul{
padding: .8em;
/*margin-top: 50px;*/
border: 1px solid #000;
background-color: #fff;
color: #000;
font-size: 90%;
max-width: 40%;
display: none;
position: absolute;
}

ul#gallery&gt;li ul li{
margin-top: 2px;
}

ul#gallery&gt;li:hover{
color: #369;
background-color: transparent;
border-color: #369;
}

ul#gallery&gt;li:hover ul{
display: block;
list-style-type: none;
}

ul#gallery ul:before{
content: "Image Information";
font-size: 130%;
font-weight: bold;
border-bottom: 1px solid #999;
display: block;
}

ul#gallery ul:after{
content: "(click to view the larger version of this image)";
font-size: 90%;
text-align: right;
border-top: 1px solid #999;
display: block;
margin-top: 1em;
}

ul#gallery img{
width: 48px;
height: 48px;
display: block;
}

img,a img{
border: 0;
}

ul#gallery:after{
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility:hidden;
}

/*
div.clear{
clear: both;
}*/


Hay que aclarar que esta galería se creó hace mucho tiempo y ahora algunas propiedades han dejado de usarse, así que desafortunadamente no validará nuestro código CSS.

El código HTML sería:

Select Code
<ul id="gallery">

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>File Size</strong>: 87Kb</li>
<li><strong>Image Size</strong>: 128x128px</li>
<li><strong>Description</strong>: A newt that's green in color.</li>
</ul></li>

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>File Size</strong>: 86Kb</li>
<li><strong>Image Size</strong>: 128x128px</li>

<li><strong>Description</strong>: An amphibian. A green amphibian. An animal.</li>
</ul></li>

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>File Size</strong>: 86.5Kb</li>
<li><strong>Image Size</strong>: 128x128px</li>
<li><strong>Description</strong>: A four-legged creature that crawls in the wild. Though it may look scary, a newt will cause no harm to human beings. It won't eat us, okay?</li>
</ul></li>

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>Author</strong>: <a href="http://cheeaun.phoenity.com/">Lim Chee Aun</a></li>
<li><strong>File Size</strong>: 87.1Kb</li>
<li><strong>Image Size</strong>: 128x128px</li>
<li><strong>Description</strong>: This image/icon is based on the original icon of Mozilla 1.0. Since this icon is created from scratch, it's not owned by <a href="http://mozilla.org/">mozilla.org</a>. It's mine :-)</li>
</ul></li>

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>File Size</strong>: 86.7Kb</li>
<li><strong>Image Size</strong>: 128x128px</li>
<li><strong>Description</strong>: Gosh.. I don't know how to describe this image..</li>
</ul></li>

<li><a href="tuimagen.png" type="image/png"><img src="thumbaildelaimagen.png" alt="newt thumbnail" /></a><ul>
<li><strong>File Size</strong>: N/A</li>

<li><strong>Image Size</strong>: 128x128px</li>
<li><strong>Description</strong>: At last...</li>
</ul></li>

</ul>


Ya está, como siempre aclarar que todo se puede personalizar de acuerdo a nuestro gusto.

Se puede ver un ejemplo de su funcionamiento en la página de su creación.

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!