JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <div class="box1"><img src="https://images.unsplash.com/photo-1744059510494-3e071c0b3596?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw4fHx8ZW58MHx8fHx8" alt=""></div>
  <div class="box2"><img src="https://images.unsplash.com/photo-1744059510494-3e071c0b3596?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw4fHx8ZW58MHx8fHx8" alt=""></div>
</div>

<!-- https://x.com/Robby_WebDesign/status/1913095137787584607 -->

SCSS

/* CSS 팁
다양한 클립 경로 사이를 부드럽게 전환하는 방법
가짜 전환 */
.container {
  position: relative;
  width: 400px;
  height: 400px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.box1, .box2 {
  
}

.box1 {
  clip-path: circle(30% at 50% 50%);
  width: 100%;
    height: 100%;
}
.box2 {
  position: absolute;
  inset: 0;
  /* z-index: -1; */
  clip-path: inset(30% 40%);
  transition: all .3s ease-in;
  &:hover {
    clip-path: inset(10% 10% round 10px);
  }
}