¿Os gustaria hacer una presentacion con imagenes diferente en vuestra web? Pues esta galeria hecha solo con CSS os va a encantar. Las imagenes se muestran como desordenadas, con efectos de superposicion al pasar el cursor y con la forma de las fotos Polaroid. Ademas, a cada imagen podemos ponerle un enlace y pueden hacer a la vez de menu. Aqui esta como os quedara una vez añadida, y mas abajo la explicacion de como hacerla.
Para implementar la galeria en nuestra web, primero ponemos los estilos CSS en el <body> de nuestra plantilla.
Ahora, solo queda añadir el codigo HTML alli donde queramos mostrar la galeria. Cambiamos lo que esta en rojo para añadir las urls de las imagenes y los enlaces. Para cambiar el tamaño modificais donde pone height="150" y width="250".
<ul class="gallery"> <li><a class="pic-1" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li> <li><a class="pic-2" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li> <li><a class="pic-3" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li> <li><a class="pic-4" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li> <li><a class="pic-5" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li> <li><a class="pic-6" href="ENLACE"><img height="150" src="URL IMAGEN" width="250" /></a></li> </ul> |
