CSS Image Opacity/Transparency

Step 1. Creating a Transparent Image

The CSS3 property for Transparency is "Opacity".

The HTML code for a regular image is as shown below.

<div class="image">
    <img src="klematis.png" />
</div>

CSS code for a Transparent Image is as shown below.

.image {
    opacity: 0.4;
    filter: alpha(opacity=60);
}

The same image with Transparency is as shown below.

Note. The opacity property can have a value from 0.0 - 1.0. A lower value makes the element more transparent. The x can have a value from 0 - 100. A lower value makes the element more transparent.

Step 2. Image Transparency Hover Effect

The CSS code is as shown below.

.image:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}

Note. In this case we want the image to not be transparent when the user hovers over it. When the mouse pointer moves away from the image, the image will be transparent again.

Step 3. Text in Transparent Box

The HTML code is as shown below.

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

The CSS code is as shown below.

.background {
    width: 500px;
    height: 250px;
    background: url('klematis.png') no-repeat;
    border: 2px solid black;
    margin-top: 15px;
    margin-left: 15px;
}
.transbox {
    width: 400px;
    height: 180px;
    margin: 30px 50px;
    background-color: #fff;
    border: 1px solid white;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.transbox p {
    margin: 34px 49px;
    font-weight: bold;
    color: #000;
}

Note. Here, we can manage the width & height, opacity, border, margin (left, right, top and bottom), font-weight, font-family, font-size, color, background-color and background-image as shown above in the CSS code.

Note. If we increase the Opacity of the transparent-box, the CSS code is as shown below.

.transbox {
    width: 400px;
    height: 180px;
    margin: 30px 50px;
    background-color: #fff;
    border: 1px solid white;
    opacity: 1;
    filter: alpha(opacity=50);
}

Summary

In this article, we learn about the Opacity Property of CSS.