CSS Image Opacity / Transparency

Creating transparent images with CSS is easy.

Try it Yourself - Examples

Creating transparent images - mouseover effect

Creating a transparent box with text on a background image

Note: This is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.

Example 1 - Creating a Transparent Image

First we will show you how to create a transparent image with CSS.

Regular image:

The same image with transparency:

Look at the following source code:

Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

Tip: The CSS3 syntax for transparency is opacity:x.

In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

Example 2 - Image Transparency - Mouseover Effect

Mouse over the images:

The source code looks like this:

We see that the first line of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.

The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.

When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.

Example 3 - Text in Transparent Box

The source code looks like this:

First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. This div also have a fixed width, a background image, and a border. In addition we make this div transparent.

Inside the transparent div, we add some text inside a p element.

Altova® MapForce®
Graphical XML Mapping Tool from the Developers of XMLSpy®

Need an easy way to get data into XML, or transform XML to another format? MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data. Then it transforms data instantly or auto-generates royalty-free data integration code for recurrent conversions. New features in Version 2010!

Download a free, fully functional 30-day trial to experience the following features: Easy-to-use, graphical data mapping interface Instant data transformation XSLT 1.0/2.0 and XQuery code generation Java, C#, and C++ code generation Advanced data processing functions Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more Visual Studio & Eclipse integration Download a fully-functional trial today!