<style>

  .beforeafter{
    position:relative;
    width:min(100%,400px);
    aspect-ratio:1;
    min-height:300px;
    isolation:isolate;
    overflow:hidden;                 /* חשוב */
    background:#000 !important;      /* מבטל רקעים לבנים מבחוץ */
    --split:50%;
  }

  .beforeafter::before,
  .beforeafter::after{
    content:"";
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-color:#000;           /* אם תמונה לא נטענת */
  }

  .beforeafter::before{
    background-image:url("https://courses.goapp.co.il/wp-content/uploads/2025/12/IMG_1397-copy-1.jpg");
    z-index:0;
  }

  .beforeafter::after{
    background-image:url("https://courses.goapp.co.il/wp-content/uploads/2025/12/IMG_1397-copy.jpg");
    z-index:1;
    clip-path: inset(0 calc(100% - var(--split)) 0 0);
    transition: clip-path 140ms linear;
  }

  .hidden-hover{
    position:absolute;
    inset:0;
    display:flex;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    z-index:2;
    background:transparent !important;
  }

  .hidden-hover > li{
    flex:1;
    height:100%;
    background:transparent !important; /* מבטל לבן מבחוץ */
  }

  /* 13 slices */
  .beforeafter:has(li:nth-child(1):hover)  { --split: 0%; }
  .beforeafter:has(li:nth-child(2):hover)  { --split: 7.6923%; }
  .beforeafter:has(li:nth-child(3):hover)  { --split: 15.3846%; }
  .beforeafter:has(li:nth-child(4):hover)  { --split: 23.0769%; }
  .beforeafter:has(li:nth-child(5):hover)  { --split: 30.7692%; }
  .beforeafter:has(li:nth-child(6):hover)  { --split: 38.4615%; }
  .beforeafter:has(li:nth-child(7):hover)  { --split: 46.1538%; }
  .beforeafter:has(li:nth-child(8):hover)  { --split: 53.8462%; }
  .beforeafter:has(li:nth-child(9):hover)  { --split: 61.5385%; }
  
</style>
  <div class="beforeafter">
    <ul class="hidden-hover" aria-hidden="true">
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li>
    </ul>
  </div>