Páginas

▼

27 junio 2011

CSS3: Agrandar imágenes ó texto al pasar el mouse

En esta ocasión explicaré como crear un elegante efecto con CSS3 para las imágenes, texto o cualquier parte de tu sitio web o blog. Se trata de hacer que cuando el mouse de nuestras visitas pasen por encima de alguna imagen o texto, se agrande animadamente, un ejemplo lo explica mejor:

unicornio unicornio unicornio


Este mismo efecto es el que puedes ver en la cabecera de Santyweb y se ve bastante bien, tanto que, podría incluso cambiar las imágenes del ejemplo con algunas otras que vayan mejor con la temática del blog y nos creamos un menú, bastante sencillo de maquetar. Y lo mejor, no utiliza nada de pesados códigos Javascript!

Se trata de la propiedad CSS3:transition combinada con la otra de CSS3:transform, que son soportadas por la mayoría de los navegadores actuales: Firefox, Chrome/Safari , Opera, Internet Explorer. El código CSS, es el esiguiente:
.zoomIt{
display:block!important;
-webkit-transition:-webkit-transform 1s ease-out;
-moz-transition:-moz-transform 1s ease-out;
-o-transition:-o-transform 1s ease-out;
-ms-transition:-ms-transform 1s ease-out;
transition:transform 1s ease-out;
}
.zoomIt:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
 Para colocar este efecto en nuestro blog tendremos que agregar el código CSS a nuestra plantilla, seguro ya muchos de ustedes conocen los siguientes pasos:

[1]Entramos al panel de Diseño>Edicion HTML>Sin expandir plantillas de artilugios

[2]Buscar con 
Ctrl+F
: 
]]></b:skin>


[3] Justo antes de 
]]></b:skin>
pegar el código CSS3, quedará algo así:
.zoomIt{
display:block!important;
-webkit-transition:-webkit-transform 1s ease-out;
-moz-transition:-moz-transform 1s ease-out;
-o-transition:-o-transform 1s ease-out;
-ms-transition:-ms-transform 1s ease-out;
transition:transform 1s ease-out;
}
.zoomIt:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
]]></b:skin>
 Ahora en donde quieras colocar este buen efecto, tendrás que modificar el elemento de la siguiente manera:
Antes
<a href='http://google.com'>Texto que agranda!</a>
 
<img src='http://ejemplo.com/imagen_que_se_agranda.jpg' />
Despues
<a class='zoomIt' href='http://google.com'>Texto que agrada!</a>
 
<img class='zoomIt' src='http://ejemplo.com/imagen_que_se_agranda.jpg' />

Y al pasar el mouse por encima de ese elemento que modificaste, se agrandará!!

Si te gusto, si lo odias o si lo puedes mejorar, Deja tus comentarios :P!

a la/s

13 comentarios:

  1. Inmortal6/27/2011 07:48:00 p.m.

    Muy lindo, y lo mejor como dices es que no es necesario Scripts.

    Habra alguna manera de agregar "class='zoomIt" como base para iamgenes y textos anteriores o tendremos que limitarnos a nuevos enlaces e imágenes?

    SAludos

    ResponderBorrar
  2. Jubilada en Acción!6/28/2011 06:33:00 a.m.

    Excelente SäNTÿ, original y vistoso efecto, pero lo mejor... sencillo de aplicar. Manos a la obra!

    ResponderBorrar
  3. Unknown6/28/2011 11:02:00 a.m.

    GuillermoVM mmm no. Pero agregar el efecto a todas las imagenes del blog se puede lograr cambiando el código CSS:

    img{
    display:block!important;
    -webkit-transition:-webkit-transform 1s ease-out;
    -moz-transition:-moz-transform 1s ease-out;
    -o-transition:-o-transform 1s ease-out;
    -ms-transition:-ms-transform 1s ease-out;
    transition:transform 1s ease-out;
    }
    img:hover{
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
    }

    Sigue los pasos de arriba, pero utiliza este código. Y todas las imágenes de tu blog tendrán el efecto ;) saludos,,!

    Jubilada en Acción!, si, es muy vistoso y tiene mucho potencial por la facilidad de su uso. Buen dia :P

    ResponderBorrar
  4. Charlie Hdez9/28/2011 12:04:00 a.m.

    Necesito saber porque las propiedades en general de ul y li cambian cuando utilizo webkit-transition o cualquier combinación de web kit

    ResponderBorrar
  5. jose3g6/02/2012 10:12:00 p.m.

    Cómo puedo hacer para guardar el enlace de una imagen al momento de subirla con un ---input type="file"--- si la pagina web la estoy desarrollando utilizando JSP? El problema es que al capturar la información contenida solo se obtiene el nombre de la imagen y no la ruta en total.

    ResponderBorrar
  6. José Guadalupe Martínez Cruz5/29/2013 11:56:00 p.m.

    es justamente lo que buscaba.. (= a favoritos

    ResponderBorrar
  7. Anónimo3/20/2014 02:29:00 p.m.

    muy buen aporte esta muy bueno el efecto me sirvio de mucho gracias

    ResponderBorrar
  8. Fretgar4/21/2014 02:44:00 p.m.

    Al pasar el mouse pierde un poco de calidad. Como puedo hacer que la imagen este mas pequeña que la original y al pasar el mouse crezca hasta su tamaño original?

    Las imagenes me salen para abajo no para el lado.

    ResponderBorrar
  9. Anónimo5/07/2014 05:03:00 a.m.

    Muy útil, gracias!!

    ResponderBorrar
  10. Anónimo2/17/2015 06:18:00 a.m.

    Me sirvió mucho. Gracias!

    ResponderBorrar
  11. Anónimo8/19/2015 06:22:00 p.m.

    Me funcionó perfecto!!! GRACIAS!!!!!

    ResponderBorrar
  12. Anónimo12/30/2015 12:53:00 p.m.

    Hola yo quiero poner eso en la imagen logo que aparece arriba de del menu de paginas de mi Blog asi como ese nombre que pusiste vos pero no encuentro la url de la imagen cual es y donde esta?

    ResponderBorrar
  13. Unknown2/24/2016 11:45:00 a.m.

    Me sirvio muchisimo :D Muchas Gracias!!!

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.