Ir al contenido principal

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

Loquendo es un programa que no necesita mucha presentación, principalmente porque lleva algo de tiempo entre nosotros y que en varias ocasiones, considero, que nos ha sido de gran ayuda al realizar vídeo tutoriales o bien algún proyecto educativo.
Loquendo se ha popularizado aún más en estos últimos años debido a que es utilizado por el popular colectivo Anonymus, para dar a conocer sus actividades.
En está ocasión les comparto 5 alternativas libres a este populoso programa.

Que es microsoft silverlight

Si entras a la pagina de Microsoft, o lees algun blog o revista sobre informática, encontrarás este nuevo término: Silverlight. Inclusive los gamers se verán envueltos por esta ola de novedades, pues la publicación del sitio de Halo 3 , uno de los juegos mas populares de Xbox, se hizo utilizando Silverlight para colocar videos en alta definición sobre trailers y escenas del juego.

Pero que es? para que sirve? quienes lo usan? Aca te dejo una simple pero clara definición, que encontré blogueando un poco.


Silverlight es un plugin que se instala en el navegador web, que en este caso significa Internet Explorer 6 o superior, Netscape 6+, Firefox 1.5+ en Windows XP y Vista; para Macintosh, Silverlight es soportado por Safari y Firefox. El plugin pesa algo así como 1.4 Mb.Silverlight es una versión reducida del framework de .NET (¡el framework completo de .NET es de 40+Mb!) enfocada a eficientar el manejo de multimedia dentro del navegador: video, audio, animación, interactividad, etc.Uno …

La beta de Windows 8 ya está disponible

La primera beta para usuarios de Windows 8, que ha recibido el nombre de Consumer Preview, ya puede descargarse desde la página de la compañía. Microsoft aprovechó el Mobile World Congress que se celebra en Barcelona para presentar este sistema operativo, que utilizará la nube para sincronizar la experiencia entre distintos dispositivos. La versión para desarrolladores (Developer Preview) deWindows 8 estaba disponible desde septiembre de 2011 y desde entonces ha sido descargada más de