Hay veces que con un codigo muy cortito podemos hacer maravillas, y solo con CSS, sin utilizar scripts ni librerias externas. Es el caso de este ejemplo que aqui te pongo, unas cajas en las que asoma un DVD, y al pasar el cursor por encima, este 'rueda' hasta salir a fuera. La propiedad de estilo que hace esto posible se llama transition, luego solo hay que 'llamarlo' con HTML y con la etiqueta alt. El resultado es muy original como podeis ver y se le puede dar muchos usos, ademas, cambiando las imagenes podemos hacer multiples creaciones. Abajo del todo tienes el codigo que he utilizado, lo que esta en rojo son las urls de las imagenes, una la del DVD y otra la del cartel de la peli.
<center><a href="#"><img style="border:2px solid #000000 !important;" src="http://uploads.boxify.me/69412/aguila-roja-cartel1.jpg" alt="DVD Case" class="sinborde" height="208" width="150"/><img src="http://uploads.boxify.me/66564/dvd.png" alt="DVD Disc" class="sinborde" /></a></center>
<style>
/* CSS DVD Animacion */
img[alt*="Case"] {
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
position: relative;
z-index: 10;
}
img[alt*="Disc"] {
margin-left: -100px;
margin-right: 60px;
position: relative;
top: -25px;
}
a:hover img[alt*="Disc"] {
-moz-transform: translate(50px, 0pt) rotate(330deg);-webkit-transform: translate(50px, 0pt) rotate(330deg);
}
img[alt*="Disc"] {
-moz-transition: all 0.5s ease-in-out 0s;-webkit-transition: all 0.5s ease-in-out 0s;
}
</style>
