CSS Opacity / Transparency
The opacity property tells how see-through or not something is on a webpage.
Transparent Image
The opacity property uses values between 0.0 and 1.0 When the value is lower, it makes things more see-through.
opacity 0.2
opacity 0.5
opacity 1
(default)
Transparent Hover Effect
The opacity property is frequently used along with the :hover selector to adjust how transparent an element appears when the mouse hovers over it.
Example explained
The initial CSS block resembles the code in Example 1. Furthermore, we've included instructions for what should occur when a user places their cursor over one of the images. In this scenario, we desire the image to become non-transparent when the user hovers over it. The CSS code for achieving this effect is opacity:1;.
When you move the mouse away from the picture, the picture becomes see-through once more.
An example of reversed hover effect:
Transparent Box
When you use the 'opacity' property to make something see-through in the background of an object, everything inside that object also becomes see-through. This can make it difficult to read text inside an object that is completely see-through.
Transparency using RGBA
If you don't want to make things see-through for child parts, as we showed earlier, you can employ RGBA colors.
For instance, the next example adjusts the see-through quality for the background color but not for the text:
In our CSS Colors Chapter, you discovered that RGB is a way to choose colors. But besides RGB, there's another way called RGBA. RGBA lets you pick a color and also decide how transparent it should be.
An RGBA color is made by mixing red, green, and blue, with an additional factor called "alpha." This alpha can be any number between 0.0 (completely see-through) and 1.0 (completely solid).
Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.
Text in Transparent Box
This is some text that is placed in the transparent box.
Example explained
First, we make a <div> box (with the class "background") that has a picture in the background and a line around it.
Next, we make a new <div> element with the class "transbox" inside the initial <div>.
The <div class="transbox"> has a background color and a border. The div is see-through.
Within a transparent <div> box, we place text within a <p> paragraph.
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property tells how transparent an element is. A lower value means more transparency.</p>
<p>Image with 50% opacity:</p>
<img src="/assets/files/sunset.jpg" alt="sunset" width="170" height="100">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property tells how transparent an element is. A lower value means more transparency.</p>
<p>Image with 50% opacity:</p>
<img src="/assets/files/plant.png" alt="plant" width="170" height="100">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>You can use the opacity property along with the :hover selector to alter the transparency when the mouse hovers over it.</p>
<img src="/assets/files/plant.png" alt="plant" width="170" height="100">
<img src="/assets/files/sunset.jpg" alt="sunset" width="170" height="100">
<img src="/assets/files/benches.jpg" alt="benches" width="170" height="100">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: rgb(0 151 167);
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When you apply the opacity property to make an element's background transparent, it also affects all the elements inside it. This may result in difficulty reading the text within an element that is completely transparent:</p>
<div class="first">
<p>opacity 0.1</p>
</div>
<div class="second">
<p>opacity 0.3</p>
</div>
<div class="third">
<p>opacity 0.6</p>
</div>
<div>
<p>opacity 1 (default)</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0 151 167);
padding: 10px;
}
div.first {
background: rgb(0 151 167);
}
div.second {
background: rgb(0 151 167);
}
div.third {
background: rgb(0 151 167);
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;">
<p>10% opacity</p>
</div>
<div style="opacity:0.3;">
<p>30% opacity</p>
</div>
<div style="opacity:0.6;">
<p>60% opacity</p>
</div>
<div>
<p>opacity 1</p>
</div>
<p>With RGBA color values:</p>
<div class="first">
<p>10% opacity</p>
</div>
<div class="second">
<p>30% opacity</p>
</div>
<div class="third">
<p>60% opacity</p>
</div>
<div>
<p>default</p>
</div>
<p>See how the text becomes see-through, along with the background color, when the opacity property is applied.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(/assets/files/flower-purple.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL