Esto de las transiciones con CSS3 es algo que a todos encanta por la variedad de efectos que podemos obtener y sin necesidad de utilizar ning?n script, todo es CSS.
Uno de estos efectos que me han preguntado es c?mo hacer para que la imagen de la cabecera (o el t?tulo del blog en caso de que no tengamos imagen) pueda aumentar al pasar el cursor con este efecto suave y deslizante.
Primero hay que procurar tener la imagen en un tama?o grande, esto es para que no se pixele al aumentarse. Con esto quiero decir que si por ejemplo, la imagen de la cabecera aumentar? a 400px de ancho entonces el ancho original de la imagen debe ser de 400px o m?s.
Luego, hay que saber las medidas que tendr? la imagen cuando est� peque?a, para eso tendremos que sacar las medidas proporcionalmente para que no se desproporcione al reducirla (?ves? te dije que alg?n d?a te servir?a)
Ahora s?, entra en la Edici?n HTML de la plantilla y agrega antes de ]]></b:skin> lo siguiente:
#header img {
width:200px; /* Ancho de la imagen en su estado normal */
height:200px; /* Alto de la imagen en su estado normal */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header img:hover {
width:400px; /* Ancho de la imagen al pasar el cursor */
height:400px; /* Alto de la imagen al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
Cambia los valores de width y height, width es el ancho de la imagen, y height el alto, en color verde ver?s a cu?l corresponde cada una.
Si lo crees conveniente puedes agregar unos m?rgenes para que la imagen no parezca que se va hacia la derecha, es decir, que d� la impresi?n que el zoom es desde el centro, para ello agrega debajo de #header img:hover { esto:
Si lo crees conveniente puedes agregar unos m?rgenes para que la imagen no parezca que se va hacia la derecha, es decir, que d� la impresi?n que el zoom es desde el centro, para ello agrega debajo de #header img:hover { esto:
margin-top:-10px;Puedes jugar con esos valores hasta que des con los correctos.
margin-left:-30px;
Pero si no usas una imagen como cabecera entonces tambi�n puedes aplicar este efecto al t?tulo del blog.
El procedimiento es similar; agrega antes de ]]></b:skin> esto:
#header h1 {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header h1:hover {
font-size:80px; /* Tama?o del texto al pasar el cursor */
color:#FF00FF; /* Color del texto al pasar el cursor */
margin-left:-30px; /* Margen izquierdo */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
Aqu? es menos complicado pues no tienes que saber las medidas de ninguna imagen, s?lo debes poner el tama?o de la fuente que tendr? el t?tulo del blog al pasar el cursor. Aunque por supuesto puedes agregar ah? otras propiedades como un color diferente, y tambi�n puedes usar los m?rgenes para que el texto se aumente desde el centro, pero si no quieres estas dos ?ltimas opciones puedes eliminarlas sin problema.
Y as? de sencillo puedes tener tu cabecera del blog con efecto de zoom al pasar el cursor, aunque, lamento desilusionar a los usuarios de Internet Explorer pues ellos no ver?n ning?n efecto de deslizamiento. Otra raz?n m?s para usar un navegador moderno.
