CSS-Clip-Effekt funktioniert nicht richtig

Question

Ich setze einen Bildaufdeckungs-Effekt auf meiner Seite ein, aber es scheint nicht richtig zu funktionieren.

Die Website enthält mehrere Kategorien, die beim Anklicken automatisch die Bilder der Kategorie in eine Diashow laden.
Wenn Sie auf eines der Bilder in der Diashow klicken, erscheint ein modales Bild mit einem anderen Bild darunter.

Ab sofort funktioniert meine Clip-Funktion, aber aus irgendeinem Grund beginnt der Clip bei 340px (also macht es das ganze Bild, weil das Bild 280px ist) im Gegensatz zu 0px und bewegt sich dann in einem Bereich von 0 -280px.

Kann jemand meinen Code überprüfen und sehen, was falsch ist?

function reveal(event) { 
 
    event.target.previousElementSibling.style.clip = "rect(0px, "+(event.clientX-event.target.offsetLeft)+"px, 280px, 0px)"; 
 
}

.reveal{ 
 
    width: 280px; 
 
    height: 280px; 
 
    border:#000 1px solid; 
 
    float:left; 
 
    margin:24px; 
 
} 
 
.reveal > img { 
 
    position:absolute; 
 
} 
 
.reveal > .modalimg2 { 
 
    clip:rect(0px, 140px, 280px, 0px); /* top, right, bottom, left */ 
 
} 
 
.reveal > .activator{ 
 
    position:absolute; 
 
    width:280px; 
 
    height:280px; 
 
    opacity:0; 
 
    cursor: e-resize; 
 
}

<div id="myModal" class="modal"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class = "reveal"> 
 
     <!-- Modal Content (The Image) --> 
 
     <img src="" id = "mimg" class = "modalimg" width = "280px" height = "280px"> 
 
     <img src="" id = "mimg2" class = "modalimg2" width = "280px" height = "280px"> 
 
     <div class = "activator" onmousemove = "reveal(event)"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

https://www.w3schools.com/jsref/prop_element_offsetleft.asp

Ich bin nicht 100% sicher, welches Element event.clientX-event.target ist. Ich vermute, dass es das div der Klasse "Aktivator" ist. Von allen CSS, die ich sehe, hat keiner der Vorfahren dieser div die Position "relativ", "absolut" oder "fixiert", also ist der Eltern-Offset entweder ein Element weiter oben in der Hierarchie oder das Fensterobjekt. Versuchen Sie die Einstellung position: relative; unter .reveal. Wenn event.clientX-event.target nicht das div des Klassenaktivators ist, erhalten Sie wahrscheinlich die Position des Cursors relativ zum Fenster. In diesem Fall müssten Sie den Offset des Elements .reveal relativ zum Fenster von event.clientX-event.target.offsetLeft subtrahieren. Wenn dies der Fall ist, gibt es hier eine gute Anleitung: How to get an element's top position relative to the browser's window?