CSS Opacity and Transparency

The opacity property is how transparent an object is over another object on a web page.  The default value of the opacity property is 1 and the range is from 0 (completely transparent) to 1 (no transparency at all).  Let’s create a nice visual effect using the CSS opacity property.

Here is an original image of a pool table:


Let’s say we want to make it a bit transparent.  Maybe we want to do a hover effect where when we hover over the image, it has no transparency but when we aren’t hovering over the image, it does have some transparency like below:


Here is the CSS for just making an image have some transparency:

img {

opacity: 0.8;

filter: alpha(opacity=80); /* For IE8 and earlier */ <–  A note for us in CSS


Let’s add the hover effect:

img:hover {

opacity: 1.0;

filter: alpha(opacity=100);


Opacity Property:  Used for IE9, Firefox, Chrome, Opera and Safari

Filter:alpha (opacity=x):  Used for IE8 and earlier.  The “x” value can range from 0 – 100.  The lower the number the more transparent the item.

Check out another example on how you can use CSS opacity for a transparent text box over an image background.

Leave a Reply

Your email address will not be published. Required fields are marked *