Otra maravilla que se puede hacer con los estilos CSS es esta presentacion de imagenes, que al pasar el cursor se expanden como una baraja. Si os gusta y quereis implementarlo en vuestra web, la cosa es muy sencilla.
Lo primero de todo es añadir el codigo CSS, que lo pondremos entre las etiquetas <body> de nuestra plantilla.
<style>
/* the A tag */
.album {
position: relative;
z-index: 5;
width: 250px;
vertical-align: top;
display:block;
}
/* the images */
.album img {
position: absolute;
top: 0;
left: 0;
border: 5px solid #f3f3f3;
box-shadow: 1px 1px 2px #666;
-webkit-box-shadow: 1px 1px 2px #666;
-moz-box-shadow: 1px 1px 2px #666;
width:250px;
height:250px;
display:block;
}
/* first image: webkit */
@-webkit-keyframes image1 {
0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}
/* first image: firefox */
@-moz-keyframes image1 {
0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}
/* first image: opera */
@-o-keyframes image1 {
0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}
/* second image: webkit */
@-webkit-keyframes image2 {
0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}
/* second image: firefox */
@-moz-keyframes image2 {
0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}
/* second image: opera */
@-o-keyframes image2 {
0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -o-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}
/* third image: webkit */
@-webkit-keyframes image3 {
0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}
/* third image: firefox */
@-moz-keyframes image3 {
0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}
/* third image: opera */
@-o-keyframes image3 {
0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
100% { -o-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}
/* first image animation properties */
.album:hover .photo1, .album:focus .photo1 {
/* webkit animation properties */
-webkit-animation-name: image1;
-webkit-animation-duration: .2s;
-webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
/* firefox animation properties */
-moz-animation-name: image1;
-moz-animation-duration: .2s;
-moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
/* opera animation properties */
-o-animation-name: image1;
-o-animation-duration: .2s;
-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
/* microsoft animation properties */
-ms-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
}
/* second image animation properties */
.album:hover .photo2, .album:focus .photo2 {
/* webkit animation properties */
-webkit-animation-name: image2;
-webkit-animation-duration: .2s;
-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
/* firefox animation properties */
-moz-animation-name: image2;
-moz-animation-duration: .2s;
-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
/* opera animation properties */
-o-animation-name: image2;
-o-animation-duration: .2s;
-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
/* microsoft animation properties */
-ms-transform: rotate(0deg) translate(0, -3px) scale(1.1);
}
/* third image animation properties */
.album:hover .photo3, .album:focus .photo3 {
/* webkit animation properties */
-webkit-animation-name: image3;
-webkit-animation-duration: .2s;
-webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
/* firefox animation properties */
-moz-animation-name: image3;
-moz-animation-duration: .2s;
-moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
/* opera animation properties */
-o-animation-name: image3;
-o-animation-duration: .2s;
-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
/* microsoft animation properties */
-ms-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
}
</style>
Una vez hecho esto, ya solo nos queda poner el codigo HTML para mostrar las imagenes cada vez que queramos. Sustituimos donde pone IMAGEN por las urls de las imagenes que queramos añadir.
<center><a class="album" href="ENLACE">
<img class="photo1" src="IMAGEN" />
<img class="photo2" src="IMAGEN" />
<img class="photo3" src="IMAGEN" />
</a></center>
|
Y aqui teneis el maravilloso resultado que obtendreis. Pasad el raton por encima y vereis el efecto:
