Desplasamiento
El Efecto de desplazar sobre una imagen es altmente utilizable para fotografias panoramicas o para crear la ilucion de que esta mucho mas grande de lo que se ve.Este efecto puede tener muchos usos y se puede conbinar con muchos otros por el momento lo utilizaremos para imagenes.
/* Izquierda */
.mov-izq {
background : url('url de la imagen') no-repeat;
background-position : left 0px;
width :200px;
height :200px;
transition : 500ms ease-in;
}
.mov-izq:hover {
background-position :right 0px;
}
/* Derecha */
.mov-der {
background : url('url de la imagen') no-repeat;
background-position : right 0px;
width :200px;
height :200px;
transition : 500ms ease-in;
}
.mov-der:hover {
background-position :left 0px;
}
/* Arriba */
.mov-top {
background : url('url de la imagen') no-repeat;
background-position : 0 0px;
width :200px;
height :200px;
transition : 500ms ease-in;
}
.mov-top:hover {
background-position :0 -200px;
}
/* Abajo */
.mov-bottom {
background : url('url de la imagen') no-repeat;
background-position : 0 -200px;
width :200px;
height :200px;
transition : 500ms ease-in;
}
.mov-bottom:hover {
background-position :0 0px;
}
.mov-izq {
background : url('url de la imagen') no-repeat;
background-position : left 0px;
width :200px;
height :200px;
transition : 500ms ease-in;
}
.mov-izq:hover {
background-position :right 0px;
}
/* Derecha */
.mov-der {
background : url('url de la imagen') no-repeat;
background-position : right 0px;
width :200px;
height :200px;
transition : 500ms ease-in;
}
.mov-der:hover {
background-position :left 0px;
}
/* Arriba */
.mov-top {
background : url('url de la imagen') no-repeat;
background-position : 0 0px;
width :200px;
height :200px;
transition : 500ms ease-in;
}
.mov-top:hover {
background-position :0 -200px;
}
/* Abajo */
.mov-bottom {
background : url('url de la imagen') no-repeat;
background-position : 0 -200px;
width :200px;
height :200px;
transition : 500ms ease-in;
}
.mov-bottom:hover {
background-position :0 0px;
}
Ejemplo:
Movimento a la izquierda <div class=""mov-izq"></div>
Movimento a la derecha <div class=""mov-der"></div>
Movimento superior <div class=""mov-top"></div>
Movimento inferior <div class=""mov-bottom"></div>
Movimento a la derecha <div class=""mov-der"></div>
Movimento superior <div class=""mov-top"></div>
Movimento inferior <div class=""mov-bottom"></div>