direction hover overlay css code example
Example 1: css circle with overlay
// html
<div class="container"> <!-- container is just for centering, it is not needed in the solution -->
<div class="circle">
<div class="overlay">
</div>
</div>
</div>
// Css
html, body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
margin:0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(64, 64, 64);
}
.circle {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: rgb(21, 156, 228);
}
.overlay {
position: absolute;
width: 200px;
height: 200px;
border-radius: 100px;
opacity: 0;
background-color: black;
transition: .4s ease;
}
.overlay:hover {
opacity: .4;
}
Example 2: css overlay
#hero{
background-image:url();
background-size:cover;
background-position:top center;
position:relative;
}
#hero::after{
content:'';
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background-color:black;
opacity:0.7;
}