Apply CSS Transparency to Images

To apply CSS transparency to images add the following properties and values to the appropriate CSS selectors. An image without any filters applied to it has an opacity of 1.0. If an image has 30% opacity it also has 70% transparency. Hover your mouse over the image below for an example.

a.transthumb img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
a.transthumb:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}

Orange Mug

JoshStauffer.com runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Become a StudioPress affiliate

Comments

  1. Jeremia says:

    Like the new layout!

    Pretty cool about the CSS transparency too!

Speak Your Mind

*