Movimiento ZOOM Hover
Los movimientos para las imagenes o para las cajas se crean mediante las propiedades hover y las posisiones margin de los elementos CSS deben tener diferentes propiedades en las propiedades hover, otras de las propiedades mas utilizables es width y height para definir un ancho espesifico y un largo especifico a los elementos, otros de los elementos para que la animacion quede mucho mas fluida es la propiedad transition que maneja el tiempo en lo que tarda en hacer el hover de este modo tendremos una animacion capa por capa que pareciera que se mueve.
Cabe aclarar que la etiqueta "img" no siempre se va a utilizar para insertar una imagen, en las propiedades CSS el que inserta imagenes al fondo de las cajas es la propiedad background:url('url de la imagen');
La propiedad "background" tiene vastantes utilidades al crear codgo web y desde esta propiedad podemos agregarle movimiento a una imagen junto a la propiedad hover
Ejemplo:
.zoom-in {
background : url('url de la imagen') center no-repeat;
background-size : 100%;
width :200px;
height :200px;
transition : 500ms ease-in;
}
.zoom-in:hover {
background-size : 150%;
}
.zoom-out {
background : url('url de la imagen') center no-repeat;
background-size : 150%;
width :200px;
height :200px;
transition : 500ms ease-out;
}
.zoom-out:hover {
background-size : 100%;
}
background : url('url de la imagen') center no-repeat;
background-size : 100%;
width :200px;
height :200px;
transition : 500ms ease-in;
}
.zoom-in:hover {
background-size : 150%;
}
.zoom-out {
background : url('url de la imagen') center no-repeat;
background-size : 150%;
width :200px;
height :200px;
transition : 500ms ease-out;
}
.zoom-out:hover {
background-size : 100%;
}
Ejemplo:
zoom-in:<div class="zoom-in"></div>
zoom-out:<div class="zoom-out"></div>
zoom-out:<div class="zoom-out"></div>