CSS Image Transparency / Opacity


It is easy to create transparent images using CSS.

Note: The CSS Opacity property is part of the W3C's CSS3 recommendations.


Examples

More Examples

Create transparent image - hover effect

Create a transparent box with text and background image


Example 1: Create A Transparent Image

The transparency of the property in CSS3 is opacity .

First, we will show you how to create a transparent image with CSS.

Normal image

klematis

The same image has transparency:

image.png

Take a look at the following CSS:

img
{
   opacity:0.4;
   filter:alpha(opacity=40); /* IE8 and earlier versions */
}

IE9, Firefox, Chrome, Opera, and Safari browsers use the transparency property to make the image opaque. The value of the Opacity attribute ranges from 0.0-1.0. The smaller the value, the more transparent the element.

IE8 and earlier versions use filter: alpha (opacity = x). The value x can take is from 0-100. A lower value makes the element more transparent.


Example 2: Transparency of The Image - Hover Effect

mouse over the image:

klematisimage.png

CSS style:

img
{
   opacity:0.4;
   filter:alpha(opacity=40); /* IE8 and earlier versions */
}
img:hover
{
   opacity:1.0;
   filter:alpha(opacity=100); /* IE8 and earlier versions */
}

The first CSS block is similar to the code in Example 1. In addition, we have added effects when the user hovers over one of the images. In this case, when the mouse hovers over the image, we want the image to be clear.

This CSS is: opacity=1 .

IE8 and earlier versions use: filter:alpha(opacity=100) .

When the mouse pointer moves away from the image, the image will have transparency again.


Example 3 - Text In A Transparent Box

image.png

The source code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    div.background
    {
       width:500px;
       height:250px;
       background:url(https://www.tutorialfish.com/demos/klematis.jpg) repeat;
       border:2px solid black;
    }
    div.transbox
    {
       width:400px;
       height:180px;
       margin:30px 50px;
       background-color:#ffffff;
       border:1px solid black;
       opacity:0.6;
       filter:alpha(opacity=60); /* IE8 and earlier versions */
    }
    div.transbox p
    {
       margin:30px 40px;
       font-weight:bold;
       color:#000000;
    }
</style>
</head>
 
<body>
    <div class="background">
    <div class="transbox">
    <p>The text is in a transparent box. 
    The text is in a transparent box. 
    The text is in a transparent box. 
    The text is in a transparent box. 
    The text is in a transparent box. 
    The text is in a transparent box. 
    The text is in a transparent box. 
    The text is in a transparent box. 
    </p>
    </div>
    </div>
</body>
</html>

First, we create a fixed height and width div element with a background image and border. Then we create a smaller div element inside the first div. This div also has a fixed width, background color, border-and it is transparent. Inside the transparent div, we add some texts inside the p element.