I have some details here.
View CSS
View HTML
.plain-card {
position: relative;
border-radius: 10px;
background: #f2f2f2;
}
.clip-plain-card-container {
position: relative;
clip-path: circle(35px at 10px 10px);
transition: all 1s ease;
padding: 40px;
border-radius: 5px;
background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
background-size: cover;
}
.plain-card:hover .clip-plain-card-container {
clip-path: circle(100%);
}
.card-plain-details {
padding: 30px 10px;
font-weight: bold;
font-size: 18px;
color: #fff;
}
<div class="plain-card">
<div class="clip-plain-card-container">
<div class="card-plain-details">
I have some details here.
</div>
</div>
</div>