<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 */
    }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.