CSS Opacity
The CSS opacity property determines the transparency of an element on a scale of 0.0 to 1.0. The greater the opacity value, the more clear the element is. The element is totally transparent or clear when the value is 1.0 which is also the default value, at 0.5 the element displayed quite blur, and at 0.0 the element is totally opaque.
Syntax of opacity property in CSS
HTML element{
opacity: value;
}
Example: Applying opacity to the HTML element
In the given example, we have created the three headings using the <h1>, <h2>, and <h3> element. In heading 1 we have specified the opacity value to 0.0, in heading 2 we have specified the opacity value to 0.5, and in heading 3 we have specified the value to 1.0.
<!DOCTYPE html>
<html>
<head>
<title>CSS Opacity</title>
<style>
h1 {
background-color: red;
opacity: 0.0;
}
h2{
opacity: 0.5;
background-color: red;
}
h3{
opacity: 1.0;
background-color: red;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</body>
</html>
Output:
So after implementation what we can see is, the heading 1 with the value 0.0 is not visible at all. In heading 2 whose opacity value is 0.5, the content is quite blurred but visible while in heading 3 whose opacity value is 1.0 is clearly visible.
Transparent and Hover Effect in CSS
The CSS allows us to use the CSS opacity along with the :hover effect. When we provide a hover effect to any element its opacity changes when the user hovers the mouse over it.
Example: Applying Transparent and Hover effect in CSS
In this example, there are three images and each image has a different opacity value along with the hover effect. When the user moves the cursor over any of the images, it will become transparent again.
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="studytonight.jpg" alt="Forest" width="250" height="150">
<img src="studytonight.jpg" alt="Mountains" width="250" height="150">
<img src="studytonight.jpg" alt="Italy" width="250" height="150">
</body>
</html>
Output:
As we can see, all three images are a blur because we have specified the CSS property opacity with the value of 0.5. When we move the cursor over any of the images it will become transparent again because we have specified the value of the opacity to 1 after the hover effect.
Adding Text in Transparent Box in CSS
With the help of CSS, we can also insert the text over the image along with the opacity property. Let's understand it with the help of a live example.
Example: Adding text in the transparent box using CSS opacity
In this example, we have created a <div> element with class .background and specify the CSS property background-image and border. Then we have created another <div> with class .transbox inside the first <div>. Inside the .transbox class we have added <p> element to insert the text in it.
Conclusion
In this lesson, we have learned how to make the images blur or invisible using the CSS opacity property. We have also learned how to make the image transparent by applying the opacity property. With the help of this property, we can also make the text blur.
