Clipped Image

Clipped Image

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