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: Santy Hdz
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:

4 comentarios !

GuillermoVM 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!

SäNTÿ 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


Página principal
Arriba