Hover over me for a cool effect!
I have some extra details hidden in here. ;)
View CSS
View HTML
.plain-card-3 {
position: relative;
border-radius: 10px;
background: #efefef;
}
.clip-card-container-3 {
position: relative;
clip-path: circle(0px at 0px 0px);
transition: all 1s ease;
width: 210px;
padding: 40px 30px 40px;
border-radius: 5px;
background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
background-size: cover;
}
.plain-card-3:hover .clip-card-container-3 {
clip-path: circle(100%);
}
.card-details-3 {
padding: 25px 0;
font-weight: bold;
font-size: 25px;
color: #fff;
}
.outer-clip-details {
font-weight: bold;
font-size: 35px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
padding: 15px 25px;
color: #353535;
background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
<div class="plain-card-3">
<div class="outer-clip-details">
Hover over me for a cool effect!
</div>
<div class="clip-card-container-3">
<div class="card-details-3">
I have some extra details hidden in here. ;)
</div>
</div>
</div>