CSS Opacity

CSS Opacity

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
//First, we create a <div> element (class="background") with a background image, and a border. 
//Then we create another <div> (class="transbox") inside the first <div>. 
//The <div class="transbox"> have a background color, and a border - the div is transparent. 
//Inside the transparent <div>, we add some text inside a <p> element.

Similar pages

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>

  • Specifies the opacity/transparency of an element.
  • Can take a value from 0.0 - 1.0; the lower value, the more transparent.
  • IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

Transparent Hover Effect

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */

The opacity property is often used together with the :hover selector to change the opacity on mouse-over.

Transparent Box

div {
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */

When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency.

This can make the text inside a fully transparent element hard to read.

Transparency using RGBA

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */

You can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

CSS Opacity — Structure map

Clickable & Draggable!

CSS Opacity — Related pages: