CSS Opacity

The CSS Opacity property is used to change the transparency of an element.

How to apply CSS Opacity

The CSS opacity's value lies between 0 to 1, like 0.2, 0.4. The lesser opacity value displays the greater opacity.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Image Opacity </title>
<meta charset="UTF-8">
<style>
img.trans {
opacity: 0.6;
filter: alpha(opacity=40);
}
</style>
</head>
<body>
<p>Normal Image</p>
<img src="PUBG.png" alt="normal" style="width:50%;"> <br /><br />
<p>Transparent Image</p>
<img class="trans" src="PUBG.png" alt="transparent" style="width:50%;">
</body>
</html>

Output

CSS Image Opacity

Normal Image

normal

Transparent Image

transparent

Transparent Hover Effect

CSS opacity property can be used together with the hover selector to change the transparency on mouse-over.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Image Transparent </title>
<meta charset="UTF-8">
<style>
i:hover {
opacity: 0.5;
filter: alpha(opacity=40);
}
</style>
</head>
<body>
<i><img src="PUBG-GAME.png" alt="PUBG Image Hover" style="width:32%;"></i>
<i><img src="PUBG-GAME.png" alt="PUBG Image Hover" style="width:32%;"></i>
<i><img src="PUBG-GAME.png" alt="PUBG Image Hover" style="width:32%;"></i>
</body>
</html>

Output

CSS Image Transparent PUBG Image Hover PUBG Image Hover PUBG Image Hover

Text in Transparent Box


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Text Transparent </title>
<meta charset="UTF-8">
<style>
#div1 {
padding: 50px;
margin-right:400px;
color: #000000;
text-align:center;
background: seagreen;
}
#div2 {
padding: 50px;
margin-right:400px;
color: #000000;
text-align:center;
background: seagreen;
opacity: .5;
}
#div3 {
padding: 50px;
margin-right:400px;
text-align:center;
color: #000000;
background: seagreen;
opacity: .2;
}
#div4 {
padding: 50px;
margin-right:400px;
text-align:center;
color: #000000;
background: seagreen;
opacity: 0.1;
}
</style>
</head>
<body>
<div id="div1"><b>PUBG</b></div><br />
<div id="div2"><b>COC</b></div><br />
<div id="div3"><b>Mortal Kombat</b></div><br />
<div id="div4"><b>Call of Duty</b></div>
</body>
</html>

Output

CSS Text Transparent
PUBG

COC

Mortal Kombat

Call of Duty











Follow Us: