<div class="container">
<img src="https://live.staticflickr.com/65535/53657396513_5da0b53f5b.jpg" alt="Sample Image" class="image">
</div>
.container {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: polygon(
50% 0%, /* Top center */
100% 25%, /* Top right */
75% 100%, /* Bottom right */
25% 100%, /* Bottom left */
0% 25% /* Top left */
);
-webkit-clip-path: polygon(
50% 0%,
100% 25%,
75% 100%,
25% 100%,
0% 25%
); /* For Safari */
transition: clip-path 0.5s ease, -webkit-clip-path 0.5s ease; /* Ensure compatibility */
}
.container:hover .image {
clip-path: circle(50% at 50% 50%);
-webkit-clip-path: circle(50% at 50% 50%); /* For Safari */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.