Thursday, 22 May 2025
Hover overlay on card or any image
<//style>
.card {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
border-radius: 10px;
cursor: pointer;
}
.card img {
width: 100%;
height: 100%;
display: block;
}
.card .overlay {
position: absolute;
top: 10%; /*change position of circle start */
right: 0;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
transform: translateY(-50%) scale(0);
transition: transform 0.6s ease-in-out;
transform-origin: right center;
z-index: 1;
}
.card:hover .overlay {
transform: translateY(-50%) scale(500); /* Big enough to cover image */
}
<//style>
<div class="card">
<img alt="Card Image" src="https://via.placeholder.com/300x200" />
<div class="overlay"></div>
</div>