Si por algo destaca CSS 3 es por las nuevas propiedades que implementa gracias a las cuales podemos omitir el uso de javascript en algunos efectos como por ejemplo el realizar un zoom sobre una imagen.
En este minitutorial os voy a enseñar a realizar un zoom sobre una imagen gracias a las propiedades transform y transition. Primero vamos a definir una clase en la cual haremos uso de la propiedad transition para indicar que el efecto de zoom no queremos que sea de forma instantánea, sino que este tardará dos segundos en terminar su efecto completo:
.zoomimg{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, transform 2s;
-o-transition: width 2s, height 2s, transform 2s;
}
Como podéis observar aparte de la propiedad hemos definido la misma con los prefijos -moz,-webkit y -o para la compatibilidad con otros navegadores. Ahora vamos a pasar a indicar el zoom que queremos realizar sobre la imagen, en mi caso indicare que esta crezca su tamaño por dos con el siguiente código:
.zoomimg{
transform : scale(2);
-moz-transform : scale(2);
-webkit-transform : scale(2);
-o-transform : scale(2);
}
Con la misma propiedad podríamos hacer un zoom inverso, es decir, que la imagen fuera más pequeña indicando una escala por ejemplo de 0.5.
El código completo quedaría de la siguiente forma:
<html>
<head>
<title>Zoom en imágenes con CSS 3</title>
<style>
.zoomimg{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, transform 2s;
-o-transition: width 2s, height 2s, transform 2s;
}
.zoomimg:hover{
transform : scale(2);
-moz-transform : scale(2);
-webkit-transform : scale(2);
-o-transform : scale(2);
}
</style>
</head>
<body>
<img src="https://juansm.com/wp-content/uploads/2014/03/logo-min.jpg" class="zoomimg">
</body>
</html>
Podéis ver el resultado de dicho efecto aquí y si tenéis cualquier duda podéis dejar un comentario.