Some Text
View CSS
View HTML
.clip-img-container {
position: relative;
clip-path: circle(50px);
transition: all 1s ease;
padding: 40px;
border-radius: 5px;
background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
background-position: bottom;
background-size: cover;
}
.clip-img-container:hover {
clip-path: circle(100%);
}
.clip-img-text {
padding: 20px;
border-radius: 5px;
color: #fff;
font-weight: bold;
}
<div class="clip-img-container">
<div class="clip-img-text">
Some Text
</div>
</div>