CSS Image Transparency

Designers Chair — Tue, 03 Mar 2009 17:01:50 +0000

Learn how to change image transparency (opacity) using only CSS code. Simple but useful technique that you can use to create nice looking gallery or just crossover effect.

Here is how it looks like…

Changing image opacity (transparency) using css :

Image opacity wih different crossover effect (move your cursor over it) :

So let’s get started. First create a new HTML document (index.html), create folder “style” and inside it create our CSS file (style.css).

Our basic HTML file looks like this :



	CSS Image Transparency | Designers-Chair.com

Tag title defines page name :

CSS Image Transparency | Designers-Chair.com

This is the path to our external CSS file :

Body is empty so nothing will be displayed when we open our HTML file in web browser. Now we are going to display our picture.

...



...

Now we see the picture but there is no transparency. Open style.css and add the following code :

img
{
	opacity:0.5;
	filter:alpha(opacity=50);
}

Notice how we have two same properties for img tag. This is because Internet Explorer uses filter:alpha(opacity:x) function (x = 0-100), but Firefox and Crome use opacity:x (x = 0-1). 0 = invisible, 1/100 = 100% visible.

Crossover effect is now easy to do. We just need to add onmouseover and onmouseout.

...

...

You can also use hover function (instead of onmouseover, onmouseout) , just add it to style.css. Note that this technique does not work with IE 6 (:hover is supported only on elements).

img
{
	opacity:0.5;               /*Firefox & Chrome*/
	filter:alpha(opacity=50);   /* IE */

}

img:hover
{
	opacity:1;               /*Firefox & Chrome*/
	filter:alpha(opacity=100);   /* IE */
}

That’s it! Simple but very useful and attractive.

Basic HTML file

Designers Chair — Sun, 01 Feb 2009 18:32:32 +0000

Create a basic HTML file that you can use as a startup for any web site.

This tutorial will be finished soon…

Designers Chair » HTML

CSS Image Transparency

Basic HTML file