Opacity Transition Using CSS

  2. HowTo
  3. CSS Howtos
  4. Opacity Transition Using CSS
Migel Hewage Nimesha Feb 20, 2023
CSS CSS Opacity CSS Transition
  1. the opacity Attribute
  2. the transition Attribute
  3. Add Opacity Transition to a Button Using CSS
  4. Add Opacity Transition to an Image and Text Using CSS
  5. Conclusion
Opacity Transition Using CSS

Cascading Style Sheets, also known as CSS, is a language where we can style web pages along with markup languages like HTML and XHTML. CSS provides various attributes for styling, and we can add them in a CSS file or inside the HTML or XHTML file.

the opacity Attribute

One of the attributes that CSS provides is opacity. Opacity is the transparency of an element: images, shapes, or content.

We can add opacity to an element using the below syntax.

Syntax:

Opacity: value

Here, the value refers to how much transparency we should give that element. We should give it as a decimal value, which should be between 0 and 1.

0 means the element is fully transparent, and one is fully visible. You can give any value between those two numbers to increase or decrease the transparency.

For example, if you want half transparency for the element, you can assign 0.5 as its value. If you need a slightly visible element, you can provide 0.2 or 0.3.

If you want a barely transparent element, you can use 0.8 or 0.7.

Opacity: 0.5;

the transition Attribute

We can use the transition attribute in CSS if we need to give a transition to an element. This attribute has several properties.
transition-delay If you need to delay your transition, this is the property you need.
transition-duration This property specifies how long a transition should take to complete.
transition-property This property describes which CSS properties should be affected by the transition effect.
transition-timing-function You can use this property to speed up or slow the transition.

This article will discuss adding an opacity transition to an element using CSS. We must use opacity and transition attributes.

We will take two examples. As the first example, we will create a button as the element, and the opacity transition will be added.

In the second example, we will add opacity transition to an image and text.

Add Opacity Transition to a Button Using CSS

First, let us create a button using HTML.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Opacity Transition</title>
    </head>
    <body>
        <!-- creating the button -->
        <div>
            <button class="btn">Click Here</button>
        </div>
    </body>
</html>

As in the above code, we’ve created a button with a class called btn.

Style the Button

Now let’s add some styles to our button using CSS. For this example, we will add the below styles to the button.

  1. A blue background.
  2. White as the font color and 30px as its size.
  3. 1px border and 10px as its radius.
  4. A 10px padding.
.btn{
    background-color: blue;
    color: white;
    font-size: 30px;
    border: 1px;
    border-radius: 10px;
    padding: 10px;
}

So now we have finished styling our button.

Add Opacity Transition

Now, let’s add the opacity transition to the button as below.

.btn:hover{
    opacity: 0.5;
    transition-duration: 1s;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Opacity Transition</title>
    </head>
    <body>
        <!-- creating the button -->
        <div>
            <button class="btn">Click Here</button>
        </div>
    </body>
</html>

The hover selector is a pseudo-class type option that CSS gives. We can select elements when we move the cursor over them.

So as in the above code, when we hover over the button, it will be half transparent since we have given 0.5 as the opacity value. We have provided 1 second as the transition duration to see the transition more clearly.

Now when we hover over the button, its color will be half blue as below.

Full CSS Code:

/* Styling the button */
.btn{
    background-color: blue;
    color: white;
    border: 1px;
    border-radius: 10px;
    font-size: 30px;
    padding: 10px;
}

/* Adding opacity transition */
.btn:hover{
    opacity: 0.5;
    transition-duration: .25s;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Opacity Transition</title>
    </head>
    <body>
        <!-- creating the button -->
        <div>
            <button class="btn">Click Here</button>
        </div>
    </body>
</html>

Add Opacity Transition to an Image and Text Using CSS

Insert an Image and Text

Let’s try to add the opacity transition to an image and text. First, we need to insert an image using HTML as in the below code chunk.

<img class="img" src="/img/DelftStack/logo.png" alt="alternatetext">

We can put the text below the image.

<p class="text">This is a picture</p>

Now our HTML code should look like this.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Opacity transition</title>
    </head>
    <body>
        <div>
            <!-- Inserting an image -->
            <img class="img" src="/img/DelftStack/logo.png" alt="alternatetext">
            <!-- Inserting a text -->
            <p class="text">This is a picture</p>
        </div>
    </body>
</html>

Add Styles to Image and Text

We can add some styles to have a clear picture of the process.

/* Styling the image */
.img{
    width:25%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Styling the text */
.text{
    text-align: center;
    font-size: 20px;
    margin-left: 45%;
    margin-right: 45%;
}

Here we have inserted the image in a smaller size and centered it. We’ve set the font size for the text and centered it below the image.

Add Opacity Transition

Now we can set the opacity transition to both image and text using the below code chunk.

.img:hover, .text:hover{
    opacity: 0.2;
    transition-duration: .25s;
}

Full CSS code:

/* Styling the image */
.img{
    width:25%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Styling the text */
.text{
    text-align: center;
    font-size: 20px;
    margin-left: 45%;
    margin-right: 45%;
}

/* adding opacity transition*/
.img:hover, .text:hover{
    opacity: 0.2;
    transition-duration: .25s;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Opacity transition</title>
    </head>
    <body>
        <div>
            <!-- Inserting an image -->
            <img class="img" src="/img/DelftStack/logo.png" alt="alternatetext">
            <!-- Inserting a text -->
            <p class="text">This is a picture</p>
        </div>
    </body>
</html>

Now when we move the cursor over the image and text, both elements will be slightly visible since we have given 0.2 as the opacity value.

If you want to hide the elements (image and text), you can set the opacity value to 0.

Conclusion

This article discussed how we could add opacity transition to an element using CSS attributes: opacity and transition. For this tutorial, we added opacity transition to a button, image, and text as examples to explain the process.

Author: Migel Hewage Nimesha
Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

Related Article - CSS Opacity

Related Article - CSS Transition