draw overlay with shape on image css code example
Example: 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;
}