Css Opacity Filters

Opacity Filter

The image below has been filtered to 50% opacity and has a rollover effect which returns it back to 100% opacity.

Roll Mouse Over Image

The Monarch butterfly (Danaus plexippus) is a well-known North American butterfly. Since the 19th century, it is also found in New Zealand, and in Australia where it is also known as the Wanderer Butterfly.

In Europe it is resident in the Canary Islands (except Lanzarote) and Madeira, and is found as a migrant in the Azores, Portugal and Spain.

A few things to remember.

If you are using a opacity filter on text you must include a width.
Filters only work on Internet Explorer 4.0+
If you are using Mozilla or Safari you need to use fraction values (ie .2 .5 .75)
If you are using Internet Explorer you need to use percentage values (0-100)

Cross Browser Compatability

filter: alpha(opacity=50);
This one works only in Interent Explorer.
opacity: 0.5;
This one is the official CSS3 method, at the moment it works in newer Mozilla versions.
-moz-opacity: 0.5;
This one works in older versions of Mozilla and Phoenix/FireBird/FireFox.

CSS

.highlightit img
{
filter:Alpha(opacity=50);
-moz-opacity: 0.5; opacity: 0.5;
}

.highlightit:hover img
{
filter:Alpha(opacity=100);
-moz-opacity: 1; opacity: 1;
}

HTML Rollover

Partial Opacity

The Tea Party

There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and talking over its head.

Not quite what this effect is called so I decided to call it partial opacity.

Anyway, if you need to create a little space this is a nice way to do it. The opacity is set at 50% (IE) or .5 (Mozilla)

NOTE: I have gave no credit to anyone. If you are the creater of this code please contact me.

CSS

div.mainStoryParent {
background: #ccc url(images/teaparty.jpg) no-repeat;
position: relative;
width: 367px;
height: 273px }

div.mainStorySlug {
background-color: white;
position: absolute;
font: 1em, sans-serif, arial, helevetica;
top: 0px;
left: 0px;
width: 180px;
height: 281px;
border: solid 1px #ccc;
filter: progid:DXImageTransform.Microsoft.BasicImage(opacity=.6);
opacity: .6}

div.mainStoryCopy {
position: absolute;
font: 1em, sans-serif, arial, helevetica;
top: 0px;
left: 0px;
width: 170px;
height: 100%;
overflow: auto;
padding: 0px 5px;
opacity: .99 }

HTML

Text below is set at 50% opactity of colour black (#000000)

Inline Style