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:
a.transparencia img {
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:
<a class="transparencia" href="#"><img src="http://i62.servimg.com/u/f62/13/32/71/45/ds125x11.png"></a>
Si quires usarlo en las imágenes dentro de tus posts, debemos hacerlo de esta forma:
.entry img {
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.
28/10/2009
CSS
JuanK
