Hidden Card Fill

Hidden Card Fill

Copy to clipboard
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>