CSS3 Opacity

« Previous Tutorial Next Tutorial »

Opacity effects, introduced in CSS3, allow you to change the transparency of HTML elements using the opacity property.

Using opacity effects, you can change the opacity of almost every element of an HTML document, such as buttons, text, or images.

The syntax to use the opacity property is as follows :

opacity: [number between 0-1];

Using the preceding syntax, if you define the opacity of an element as 0.5, it means the element will be 50% transparent.

The opacity property is supported by new versions of all major browsers. However, some older browsers require some custom code to use the opacity property. For instance, the older versions of Firefox browser use the -moz- prefix, the Chrome browser use the -webkit- prefix, and the Safari browser use either the -khtml- or the -webkit- prefix.

CSS3 Opacity/Transparency Example

The following code snippet shows an example of using the opacity property :

img { opacity:0.6; }

In the preceding code snippet, we have to set the opacity of the IMG element to 0.6, i.e. 60%. It means that the element gets transparent by 60%.

You can change the transparency of any HTML element by changing its opacity property.

The following code fragment shows the use of the opacity property for different browsers :

opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-khtml-opacity: 0.5;

Note - Internet Explorer does not support the opacity property. An alternate to use the opacity property on the Internet Explorer browser is given in the following code fragment :


The following code fragment shows the use of opacity property :

h1{ background:#036; opacity:0.0;}
h2{ background:#036; opacity:0.2;}
h3{ background:#036; opacity:0.4;}
h4{ background:#036; opacity:0.6;}
h5{ background:#036; opacity:0.8;}
h6{ background:#036; opacity:1.0;}

In the preceding code fragment, the opacity value 1.0 makes an element completely visible (opaque), while the opacity value 0.0 makes the element completely invisible (transparent).

CSS3 Image Opacity/Transparency

You can use CSS to create image opacity or transparency.

Create a Transparent Image using CSS3

Here is the normal image:

normal image

Here is the same image with transparency effect or opacity effect (of 0.4):

css transparent image

CSS3 Image Opacity/Transparency Example

Now let's look at the following example to know how to create transparent image using CSS3:

<!DOCTYPE html>
   <title>CSS3 Opacity Example</title>
      img { opacity: 0.4; filter: alpha(opacity=40); }

<img src="anim.jpg" width="200" height="150" alt="image5">


Here is the sample output produced by the above CSS3 image opacity example code:

css3 opacity effect

CSS3 Image Transparency on Mouse Hover (Hover Effect)

Let's look at the following example to know how to change the image transparency on mouse hover:

<!DOCTYPE html>
   <title>CSS3 Image Opacity Example</title>
      #img1 img { opacity:0.4; filter:alpha(opacity=40); }
      #img1 img:hover { opacity:1.0; filter:alpha(opacity=100); }
      #img2 img { opacity:0.4; filter:alpha(opacity=40); }
      #img2 img:hover { opacity:0.6; filter:alpha(opacity=60); }
      #img3 img { opacity:0.4; filter:alpha(opacity=40); }
      #img3 img:hover { opacity:0.8; filter:alpha(opacity=80); }

<img src="image1.jpg" id="img1" width="200" height="150" alt="image1">
<img src="image2.jpg" id="img2" width="200" height="150" alt="image2">
<img src="image3.jpg" id="img3" width="200" height="150" alt="image3">


Here is the live demo output produced by the above CSS3 image opacity effect on mouse hover example code. To watch the image transparency or opacity, just place your mouse's cursor on all the 3 images one by one:

css image opacity css image transparency css image opacity effect example

Here, we make changes the image transparency when a user hovers over one of the images.

CSS3 Add Text in Transparent Box

Here is an example shows how to add text in the transparent box using CSS3:

<!DOCTYPE html>
   <title>CSS3 Opacity or Transparency Effect Example</title>
      div.background{background: url(bgimg.jpg) repeat; border:2px solid silver; }
      div.transbox{margin-top:30px; margin-bottom:30px; margin-left:60px;
         margin-right:60px; background-color:#ffffff; border:1px solid silver;
         opacity:0.6; filter:alpha(opacity=60); }
      div.transbox p{margin:5%; font-weight:bold; color:red; }

<div class="background">
   <div class="transbox">
      <p>This is a paragraph which is placed in the transparent box</p>


Here is the sample output produced by the above CSS3 opacity effect example code:

css3 image opacity example

CSS Online Test

« Previous Tutorial Next Tutorial »

© Copyright 2021. All Rights Reserved.