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:
filter: alpha(opacity=80); /* For IE8 and earlier */ <– A note for us in CSS
Let’s add the hover effect:
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.