Problem
Create an overlay with opacity => content inside it also opacity
Want to ignore opacity on content inside the overlay
Solution
<div class= "wrapper" >
<div class= "overlay overlay-black" >
<h2> Hi Jisoo</h2>
</div>
<img src= "https://image.thanhnien.vn/w2048/Uploaded/2021/wsxrxqeiod/2021_12_24/blackpink-1-6772.jpg" alt= "testpic" >
</div>
Enter fullscreen mode
Exit fullscreen mode
.overlay {
width : 100% ;
height : 100% ;
position : fixed ;
width : 100vw ;
height : 100vh ;
display : flex ;
text-align : center ;
justify-content : center ;
align-items : center ;
cursor : pointer ;
display : none ;
}
.overlay-black {
// css for content inside overlay
background : rgba ( 0 , 0 , 0 , 0.1 );
color : white !important ;
}
.wrapper :hover .overlay-black {
display : flex ;
}
Enter fullscreen mode
Exit fullscreen mode
Top comments (0)