Cómo hacer efecto de Zoom en imagenes con CSS

Hola, es este día vamos a mostrarle como crear un efecto de zoom en una imagen usando CSS cuando pones el cursos arriba de la imagen. Siendo así un efecto muy atractivo si es que lo quieres colocar en tu blog, y cuando tus usuarios pongan el cursor arriba de la imagen esta aumente su tamaño y al final el usuario quedará sorprendido.

Puedes ver en esta imagen (si es que cargo bien la página) como sería este efecto:

Bueno, si cargó y lo viste o no cargó y te cagó, vamos a explicar como realizar esto. En primer lugar tenemos que tener en cuenta varias cosas: la imagen debe esta dentro de un contenedor, y la seleccionada debe tener el atributo de clases ( class="nombre" ) para poder ser una imagen zoomable; en algún lugar de tu blog debe ir el estilo CSS para que esto funcione.

Para esta prueba vamos a ir a tu blog de blogger (porque se me dio la gana de hacerlo aquí) y localizamos diseño, dentro de diseño en algún lugar creamos un gadget de HTML/Javascript

Luego le saldrá una ventana, y como le dije, escojen HTML/Javascript, y luego en la sección del contendo vamos a pegar el siguiente código.


Lo primero que escribiremos será una clase css (dentro de una etiqueta style obviamente), yo la llamaré .contenedor y dentro de esta le ajustamos el tamaño, puede ser width:100% o más. Y le ponemos el atributo overflow con valor de hidden para solucionarnos muchos problemas.

.contenedor{

     width: 100%;  /*puede ser 90% 400px 23em, cualquier medida*/

     overflow: hidden; 

}

Luego, vamos a modificar los atributos de la imagen a mostrar que esta dentro de (algún elemento html) una capa DIV que es de clase contenedor y fijamos los siguientes valores.

.contenedor img{

     transition: 1s; /*tiempo para el efecto*/ 

     width: 100%

}

y  para que el efecto se efectué (valga la generada redundancia) vamos a fijar una estilo para cuando el cursos este arriba de la imagen.

.contenedor:hover img{

     transform: scale(1.20); /*valor que tu quiere para hacer zoom*/ 

}

Al fin, queda todo dentro del gadget de HTML/Javascript de la siguiente forma:

<style>
.contenedir img{
  transition: 1s;
  width:100%;
}
.contenedir:hover img{
  transform:scale(1.25);
}
.contenedir{
  width:100%;
  overflow:hidden;
}
</style>

Y ya tenemos terminada la parte de logística, nos falta hacer que tal imagen sea afectada por este efecto. Para esto solo vasta con buscar el código fuente de una imagen y encerrarla con las etiquetas DIV : <div class="contenedor"> ... <img src="http://go.es/im.jpg" /> .. </div>


y esto es todo, si hay dudas, hágame lo saber, nos vemos en otro momento!