Truco: Photo Mootools Desplegable con Css

el
Photo mootools Album desplegable es un truco que vi es como si se esparcieran las fotos para mirar todas las fotos que hay en el album.
Este truco es basado solo en CSS.
  • Primero Vas a Plantilla.
  • Luego das Click en Edicion de HTML.
  • Das click en expandir plantilla de artilugios
  • Luego pega lo siguiente antes de ]]></b:skin>
/* the A tag */
.album {
  position: relative;
  width: 250px; /*ancho del album */
  vertical-align: top;
  display:block;
}

/* the images */
.album img {
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid #f3f3f3; /* color del borde */
  box-shadow: 1px 1px 2px #666;
  -webkit-box-shadow: 1px 1px 2px #666;
  -moz-box-shadow: 1px 1px 2px #666;
  width:250px; /* ancho del las fotos */
  height:250px; /alto de las fotos */
  display:block;
}
  • Luego pega lo siguiente antes de </head>.
<link href='http://dl.dropbox.com/u/58710285/ihojosestudios/futudownloads/css/mootools.navegator-animation.css' rel='stylesheet' type='text/css'/>
<link href='http://dl.dropbox.com/u/58710285/ihojosestudios/futudownloads/css/mootools.photoalbum.css' rel='stylesheet' type='text/css'/>
  • Ese es el CSS de animacion y estylo del album.
  • Luego en cualquier entrada que crees podras agregar un album de esta forma.
<a href="#" class="album">
  <img class="photo1" src="http://dl.dropbox.com/u/53097108/ihojosestudios/asiam/artist/morning-musume.jpg" />
  <img class="photo2" src="http://davidwalsh.name/dw-content/gplus/photo1.png" />
  <img class="photo3" src="http://davidwalsh.name/dw-content/gplus/photo2.png" />
</a>
  • Lo azul será el URL de las imagenes, Lo que está en  purpura es la numeracion de cada foto, como la photo3 que seria la portada del album, la ultima foto es la portada, Lo que está en rojo será el enlace del album donde estaran las fotos.
  • Mira el siguiente ejemplo.