Hacker of the Web
Tus ideas en código!...y mas

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

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!

Por: Unknown
En que se publicó
Etiquetas , , ,
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

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

Emoticons
Comenta con tu:
Comenta:

13 comentarios !

Inmortal dijo...

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

Jubilada en Acción! dijo...

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

Unknown dijo...

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

Charlie Hdez dijo...

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

jose3g dijo...

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.

José Guadalupe Martínez Cruz dijo...

es justamente lo que buscaba.. (= a favoritos

Anónimo dijo...

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

Fretgar dijo...

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.

Anónimo dijo...

Muy útil, gracias!!

Anónimo dijo...

Me sirvió mucho. Gracias!

Anónimo dijo...

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

Anónimo dijo...

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?

Unknown dijo...

Me sirvio muchisimo :D Muchas Gracias!!!


Página Principal
Arriba