Text Card Fill

Text Card Fill

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