Some text in this area here
View CSS
View HTML
.plain-card-4 {
position: relative;
border-radius: 10px;
background: #f2f2f2;
}
.clip-plain-card-container-4 {
position: absolute;
clip-path: circle(30px at 7% 8%);
transition: all 1s ease;
top: 0;
border-radius: 5px;
background: #e14237;
width: 100%;
height: 100%;
z-index: 0;
}
.clip-plain-card-container-2-4 {
position: absolute;
clip-path: circle(35px at 95% 95%);
transition: all 1s ease;
top: 0;
border-radius: 5px;
background: #3d6be1;
width: 100%;
height: 100%;
z-index: 0;
}
.outer-clip-details-4 {
font-weight: bold;
font-size: 35px;
position: relative;
margin: 0 auto;
padding: 20px 35px;
color: #353535;
z-index: 10;
transition: all .2s ease-in-out;
width:250px;
}
.plain-card-4:hover .clip-plain-card-container-4 {
clip-path: circle(80%);
}
.plain-card-4:hover .clip-plain-card-container-2-4 {
clip-path: circle(65% at 90% 80%);
}
.plain-card-4:hover .outer-clip-details-4 {
color: #fff;
}
<div class="plain-card-4">
<div class="outer-clip-details-4">
Some text in this area here
</div>
<div class="clip-plain-card-container-4"></div>
<div class="clip-plain-card-container-2-4"></div>
</div>