CSS Function - opacity()

Quiz

CSS opacity() function sets the transparency level of an element. It is used with the CSS filter property. The value 0 makes the element completely transparent (invisible), while 1 (or 100%) keeps it fully visible.

Syntax

The syntax for the CSS opacity() function is as follows:

filter: opacity(amount);

Parameter

CSS opacity() function accepts a single optional parameter (amount) that specifies the transparency level of an element. If the amount is not specified, 1 is used as the default value.

Examples of CSS opacity() Function

The following examples illustrate the use of the CSS opacity() function. Elements can be made transparent, semi-transparent, or completely visible using the opacity() function.

Setting Opacity of Image

In this example, we have set the opacity level of an image. The image is displayed at opacity levels of 0, 50%, and 100%. As the opacity level decreases, the image becomes more transparent.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS opacity() Function</title>
    <style>
        .container {
            width: 400px;
            border: 2px solid #04af2f;
            padding: 20px;
            margin: 10px;
            display: inline-block;
        }
        .img1 {
            filter: opacity(0);
        }
        .img2 {
            filter: opacity(50%);
        }
        .img3 {
            filter: opacity(100%);
        }
    </style>
</head>
<body>
    <h2>CSS opacity() Function</h2>
    <div class="container">
        <h3>Image at opacity(0%): </h3>
        <img class="img1" src="/html/images/test.png" alt="logo">
    </div>
    <div class="container">
        <h3>Image at opacity(50%): </h3>
        <img class="img2" src="/html/images/test.png" alt="logo">
    </div>
    <div class="container">
        <h3>Image at opacity(100%): </h3>
        <img class="img3" src="/html/images/test.png" alt="logo">
    </div>
</body>
</html>

Setting Opacity of Text

In this example, we have used the opacity() function to set the opacity level of the text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS opacity() Function</title>
    <style>
        .myClass {
            filter: opacity(0.5);
        }
    </style>
</head>
<body>
    <h2>CSS opacity() Function</h2>
    <div class="myClass">
        The opacity value for this paragraph is set to 0.5.
    </div>
</body>
</html>

Changing Opacity on Hover

In this example, we have changed the opacity of an image upon hovering over it.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS opacity() Function</title>
    <style>
        img:hover {
            filter: opacity(50%);
        }
    </style>
</head>
<body>
    <h2>CSS opacity() Function</h2>
    <p>
        <strong>Hover over this image to change its opacity.</strong>
    </p>
    <img src="/html/images/test.png" alt="logo">
</body>
</html>

Supported Browsers

Function
opacity()	18	12	35	6	15

Print Page