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:

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: 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í: Ahora en donde quieras colocar este buen efecto, tendrás que modificar el elemento de la siguiente manera:

Antes

Despues

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!