Opacity in CSS is a property that specifies to control the transparency of elements such as content or images . Using this property, we can set any images to be completely opaque ( visible ), fully transparent ( hidden ), or translucent (partially visible). It takes a numeric value lies between 0 and 1. Where 0 defines fully transparent and 1 defines completely visible. Opacity values between 0 and 1, such as 0.2, 0.4, 0.6, etc., change an image from transparent to opaque by gradually increasing the decimal value.
Syntax
opacity : <numeric value>
The numerical value needs to fall within the range of 0 to 1 in order to achieve a semi-transparent effect on the image. Assigning a value of 1 will result in the image being fully opaque, while a value of 0 will render the image entirely transparent.
In this instance, the opacity attribute will be employed to achieve a translucent effect as the mouse hovers over the element.
Main.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple example to display the Opacity</title>
</head>
<style>
.get {
background: red;
width: 300px;
height: 250px;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
.get:hover { // hover is used to show the impact on element when the mouse on the element.
opacity: 0.5; // set the opacity value to 0.5
}
</style>
<body>
<div class="get"></div> // use of class in CSS.
</body>
</html>
Output
Hover over the crimson rectangle to reveal a translucent or opacity effect.
Transition Opacity in CSS
In Cascading Style Sheets (CSS), the opacity transition property is employed to gradually alter the opacity level of an element from one state to another. This signifies that the opacity transition shifts the visibility of the solid element to transparent within a specified time frame. The opacity transition encompasses four distinct attributes: transition-property, transition-duration, transition-timing-function, and transition-delay. These attributes are utilized to execute the opacity transition on an image. Particularly, the transition-duration attribute holds significance as it dictates the pace of the opacity alteration on an element across a specified duration in either milliseconds or seconds.
Shorthand property of transition is as follows:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Syntax to define the transition opacity in CSS
{
transition: opacity 5s;
opacity: 1; // set opacity property to 1, completely visible
}
Or
{
transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond
}
Transition property
Below are the transition attributes employed to manage the transition effects.
| Value | Description |
|---|---|
| Transition- property | It is used to define the name of the CSS property that shows the transition effect to images. |
| Transition- duration | It is used to define the time period in seconds or milliseconds to display the transition effect. |
| Transition-timing-function | It is used to define the speed curve on an image to show the transition effect. |
| Transition- delay | Specifies whether the transition effect is initiated on the element or image. |
Note: While setting the transition property to the image or contents, we must define the transition-duration property; otherwise, the duration becomes 0, and it will not show any effect.
The need for transition opacity in CSS
The transparency in CSS is a basic property that manages the level of see-through quality of an image by defining the opacity within the scale of 0 to 1. This property showcases either a steady or abrupt alteration in an element to demonstrate the transparency impact. To illustrate, when aiming to exhibit an image with a see-through quality, the opacity must be adjusted from 0 to 1. Consequently, the transparency effect becomes visible instantly without any delay. Hence, CSS provides a transition opacity feature that regulates the element's see-through quality gradually over a set duration. By incorporating the transition-timing-function within the transition opacity, one can specify the pace at which the element's transparency alters, thereby ensuring a swift transparency effect on an image. This method allows for the gradual transition of the opacity effect within the specified timeframe instead of an immediate change.
In this instance, we will employ the transition opacity attribute to showcase the opacity transition over a defined duration rather than instantaneously.
File1.html
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition opacity Property
</title>
<style>
.pr{
width: 400px;
height: 300px;
background: lightgreen;
position: relative;
}
.cr{
width: 270px;
height: 200px;
position: absolute;
/* top: 30px; */
left: 30px;
color: white;
margin: 40px auto;
margin-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
background: red;
font-weight: Bold;
font-size: 36px;
opacity: 0;
}
.cr:hover {
opacity: 1;
transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */
-webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-in-out;
}
</style>
</head>
<body>
<h1> Use of Transition Opacity Property in CSS </h1>
<div class="pr">
<div class="cr">
Hello friends, Welcome to C# Programming
</div>
</div>
<p> Move the cursor (mouse) over the green square box to see the transition opacity effect. </p>
</body>
</html>
Output
Move the cursor over the green box to display the transition opacity effect, as shown below.
It requires 2 seconds for the full visibility of an element, as demonstrated below.
When the webpage initially loads, only the green box is visible. However, as the user hovers the mouse over the box, it smoothly transitions to a red color along with the specified message, taking 2 seconds to complete the animation.
In this instance, we employ the transition opacity attribute to display the opacity impact over a defined duration instead of instantaneously, to validate the hyperlink.
Fade.html
<html>
<head>
<style >
.c2 { opacity : 0.3;
transition:opacity 1s;
padding:40px;
position : absolute;
margin-top: 30px;
background-color:yellow;
width: 200px;
height: 200px;
font-size: 25px;
font-style : Bold;
color: green;
}
.c2:hover { opacity : 1}
</style>
</head>
<body>
<h1> Using transition opacity property in CSS </h1>
<div class="c2">
C# Tutorial: Best Tutorial Site
<div > Check link is working <br >
<p style="font-size:14px";> <a target="new" href="">
</a>
</p>
</div>
</div>
</body>
</html>
Output