364 Dias en Fotografías y un poquito mas

.galleryHcontenedor { width: 480px; /* el ancho total */ height: 400px; /* el alto total */ margin: 0px auto; background: #EEEEEE url(URL_imagen) no-repeat scroll 0px 0px; /* la imagen por defecto */ border: 1px solid #AAAAAA; text-align: center; } .galleryH { position: relative; width: 480px; /* el ancho de las imágenes */ margin: 360px 0px 0px 0px; /* el margen superior es igual al alto de la imagen */ padding: 0; list-style-type: none; } .galleryH img { border:none; } .galleryH li { float:left; } /* las propiedades gráficas de los números inferiores */ .galleryH li a, .gallery li a:visited { float: left; width: 32px; margin: 6px 2px 0px; padding: 3px 0; background-color: #FFFFFF; border: 1px solid #444444; color: #000000 !important; text-decoration: none !important; } .galleryH li a img { position: absolute; visibility: hidden; /* las imágenes están ocultas */ left: 0px; top: -360px; /* la imagen se mostrará arriba */ border: none; } .galleryH li a:hover { background-color: #DDDDDD; /* efecto rollover */ } .galleryH li a:active img, .galleryH li a:focus img { visibility: visible; /* mostrar la imagen al hacer click */ } .galleryH li a:active, .galleryH li a:focus { background-color: #C2C4D0; } 364 Dias en Fotografías y un poquito mas