Este efecto de opacidad queda muy bien tanto en los posts del blog como en alguna imagen en la sidebar, se trata de crearle opacidad a una imagen pero al pasar el cursor sobre ella recupera el color original. Esta es una forma distinta y original de mostrar nuestras imágenes, o incluso de crear un menú.
Para lograr este efecto entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* OPACIDAD EN IMAGENES
----------------------- */
a.opacidad img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.opacidad:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
Ahora cuando quieras usar este efecto en una imagen dentro del post o en un elemento HTML/Javascript, usa este código:
<a class="opacidad" href="URL del enlace" src="URL de la imagen"><img src="URL de la imagen"></a>
Sólo agrega la URL del enlace si es que lo tiene, sino elimina esta parte: href="URL del enlace"
Como ves, la URL de la imagen va dos veces, esto es porque una es para mostrar la imagen con la opacidad y la otra es para mostrar la imagen con el color normal.
Categories:
Efectos
