.beforeafter-hover {
  position: relative;
  overflow: hidden;
}
.beforeafter-hover img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: clip-path 0.6s ease;
}
.beforeafter-hover .before-img {
  z-index: 1;
}
.beforeafter-hover .after-img {
  z-index: 2;
  clip-path: inset(0 100% 0 0); /* hidden from right */
}
.beforeafter-hover:hover .after-img {
  clip-path: inset(0 0 0 0); /* fully visible */
}