CSS Overlay Background Transparent
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Anjali
In this tutorial we will show you the solution of CSS overlay background transparent and we are going to understand how to use overlay in CSS but the background must be transparent.
There are many ways with help of which we can add a transparent background with overlay using CSS.
Let us understand some of the many below.
Step By Step Guide On CSS Overlay Background Transparent :-
Now, below we are going to show you an example that helps to understand how to use CSS overlay with background transparent.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title> Media CSS query for mobile</title>
<style>
.first {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRA7AiJTQZ4R4UTdj9p7L5Vm6Zph5mzu7oQw&usqp=CAU) 0 0 no-repeat;
min-height: 634px;
}
.second {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRA7AiJTQZ4R4UTdj9p7L5Vm6Zph5mzu7oQw&usqp=CAU) 0 0 no-repeat;
min-height: 301px;
margin-bottom: 30px;
}
.thired {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3HXfkdhWnEiViRfaBD2L2v4f5G4RfsBYCmw&usqp=CAU) 0 0 no-repeat;
min-height: 301px;
}
.first, .second, .thired {
background-size: cover;
position: relative;
}
.first:hover .overlay_css, .second:hover .overlay_css, .thired:hover .overlay_css {
opacity: 1;
cursor: pointer;
}
.overlay_css {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: rgba(259, 67, 95, 0.7);
overflow:hidden;
}
.first a,
.second a,
.thired a {
color: #fff;
}
.first h3,
.second h3,
.thired h3 {
padding: 15px 30px;
}
@media screen and (max-width: 768px) {
.first, .second, .thired {margin-bottom: 10px;}
}
</style>
</head>
<body>
<div class="container py-2">
<div class="row">
<div class="col-md-6">
<div class="first w-100">
<div class="overlay_css h-100 w-100"></div>
<div>
<h3><a href="#">This is first example<br> Which we will see here </a></h3>
</div>
</div>
</div>
<div class="col-md-6">
<div class="second">
<div class="overlay_css h-100 w-100"></div>
<div>
<h3><a href="#"> This is second example <br> have width half of the above </a></h3>
</div>
</div>
<div class="thired">
<div class="overlay_css h-100 w-100"></div>
<div>
<h3><a href="#"> This has another half width <br> so it known as second half</a></h3>
</div>
</div>
</div>
</div>
</div>
</body>
</html>- As, here we see that in the above example, we show you how HTML and CSS codes are used.
- Here, first of all, we create a basic structure of HTML, in which we use <!DOCTYPE html> which defines the type of document. And next one is our HTML tags. These tags are paired tags and all the data regarding HTML is written inside these tags.
- After we use our head tag which is again paired tag and contains the title and meta information of the webpage. The data written inside the head is not shown on the webpage.
- Now, next is our title tag which defines the title of the webpage. The tag which has its closing tag is known as a paired tag. So, this is again a paired tag.
- Now, next is the body which is the main tag of HTML. The data which we have written inside the body is shown on the webpage. Mostly all tags which are helpful to show data or information on the screen are written under the body tag.
- As, above we see that we create an overlay effect with background transparent. When you run the codes given above.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we can understand media CSS queries for mobile.
I hope this tutorial on CSS overlay background transparent helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
