Efecto Zoom en Imagenes con CSS


Buscando efectos CSS para poder adaptarlos a Blogger encontre un efecto muy bueno solo utilizando CSS, este efecto hace que las imágenes se hagan mas grandes al pasar el mouse sobre ellas.

Para poder logra este efecto vamos a Blogger, nos vamos a Diseño > Edicion de HTML y buscamos la etiqueta ]]</b:skin>. Antes de esa etiqueta debemos pegar el siguiente código:
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
Ahora para poder hacer que las imágenes tengan el efecto de zoom ponemos la siguiente etiqueta para cada imagen.
<div class="hovergallery">
<img src="URL de la Imagen" />
</div>
Y listo ya está nuestro efecto de zoom en las imágenes, espero que les guste el efecto.

Comentarios

Entradas populares de este blog

5 alternativas open source a Loquendo

Que es microsoft silverlight

La beta de Windows 8 ya está disponible