Ejemplo: círculo css con superposición
// html
<div> <!-- container is just for centering, it is not needed in the solution -->
<div>
<div>
</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;
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)