Albumes de imágenes (2)

Este segundo ejemplo de álbum se basa en CSS Image Gallery de Dynamic Drive. A diferencia del anterior, el DIV sólo contiene vínculos.

Estos vínculos son dos imágenes, la primera, una miniatura y la segunda, oculta, es la imagen de tamaño natural. Al pasar el puntero del ratón sobre el vínculo, se muestra la imagen original en una posición absoluta, predeterminada y, como opción, se agrega un texto descriptivo.

El código CSS es el siguiente:

.galleryVcontenedor {
position: relative;
heigh: 360px; /* altura imagen para evitar desbordamientos */
}

.galleryV {
color: #000000 !important;
text-decoration: none !important;
}

.galleryV img {
border: 1px solid #DDDDDD;
}

.galleryV:hover {
background-color: transparent;
}
.galleryV:hover img{
border:1px solid #FFFFFF;
}

/* propiedades de la imagen de tamaño natural */

.galleryV span {
position: absolute;
visibility: hidden;
padding: 5px;
background-color: #DDDDDD;
}

.galleryV:hover span {
visibility: visible;
left: 110px; /* distancia a la que se mostrará */
top: 90px; /* distancia a la que se mostrará */
z-index: 50;
}

Y este es el código HTML:

<div class="galleryVcontenedor">
<a class="galleryV" href="javascript:void(0);">
 <img src="URL_imagen1" width="anchoMiniatura" />
 <span>
    <img src="URL_imagen1" width="anchoNormal" />
    <br />Texto Nº 1
 </span>
;</a>
<br />

[... se repite para todas las imágenes ...]

<a class="galleryV" href="javascript:void(0);">
 <img src="URL_imagenX" width="anchoMiniatura" />
 <span>
    <img src="URL_imagenX" width="anchoNormal" />
    <br />Texto Nº X
 </span>
;</a>
<br />
</div>

En este caso, utilizamos una sola imagen, a la primera, la siempre visible, la forzamos a tener una cierta dimensión, y a la segunda, le damos el tamaño más grande, pero también podríamos utilizar dos diferentes, una pequeña y una grande.

La imagen Nº 1

La imagen Nº 2

La imagen Nº 3

La imagen Nº 4

La imagen Nº 5

La imagen Nº 6

VER:

Albumes de imágenes (1)