Imágenes transparentes con CSS
Mostrar imágenes transparentes es una buena técnica en diseño, sí, se ven bien. Esta técnica la utilizo en la sidebar, donde están las imágenes 125x125.
En este post les mostraré como hacerlo utilizando CSS. Las imágenes estarán transparentes de forma predeterminada y al pasar el mouse sobre ellas volverán a su estado normal.
Para hacerlo crearemos un class en CSS, que puede tener cualquier nombre. El código que agregaremos a nuestra hoja de estilos será el siguiente:
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /*Internet Explorer 8*/}
a.transparencia:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*Internet Explorer 8*/}
Para lograr el efecto debemos agregar el class a la imágen, de esta forma:
Si quires usarlo en las imágenes dentro de tus posts, debemos hacerlo de esta forma:
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*Internet Explorer 8*/}
En este caso sólo se mostrará la transparencia, sin el efecto hover.
Con esto será suficiente y ya podremos observar el efecto en nuestras imágenes.
24/10/2009
October 26th, 2009 a las 1:24 pm
Pero no será más fácil dejar una nueva imagen difuminada en el a:hover??
Supongo que también funciona, pero sólo para 1 imagen y con el truco de CSS que nos muestras será automático para cualquier imagen verdad?
October 26th, 2009 a las 4:27 pm
@DoctorPc: también funcionaría, pero si lo piensas: al usar una segunda imágen difuminada retardarías la carga de la misma, ya que debe actualizarse, sin embargo este truco sólo la hace transparente, sin necesidad de otra. Resulta más económico si hablamos de de ancho de banda a utilizar, ya que no requiere una segunda carga de una imágen.
No se si entendió, pero se intenta decir que es más efectivo y rápido.
Con el truco, si lo aplicas directamente al div “post” o “entry” de tu blog, se utilizaría para todas las imágenes del blog dentro de los posts.
October 28th, 2009 a las 6:47 pm
Sip, quedo clarisimo, me queda la ultima duda: ¿funciona con todos los tipos de img (jpg,png,gif,etc.)?
Gracias!
October 28th, 2009 a las 6:48 pm
@DoctorPc: claro, CSS considera todos los tipos de imágenes dentro de la variable “img”, por tanto no debería haber problemas al utilizarlo.
November 5th, 2009 a las 5:34 pm
Es increíble el material que se encuentra en tu sitio. Felicitaciones por la producción y por todo lo que aportas. Quería compartir con tus seguidores un sitio de desarrollo web súper interesante. Espero les guste
Saludos y más felicitaciones