CSS clip effect not working properly

Question

I'm putting in an image reveal effect on my site but it doesn't seem to be working properly.

The site will have several categories that when clicked automatically load the category's pictures into a slideshow.
If you click any of the pictures in the slideshow a modal will pop up of that image with another image positioned underneath it.

As of now my my clip function is working but for some reason the clip is starting at 340px(thus making it so the full image shows because the image is 280px) as opposed to 0px and then moving in a range from 0-280px.

Can someone check my code and see what's wrong?

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>

It's not 100% clear what you're trying to accomplish here. "Clipping" can mean a number of different things depending on the exact language that you're using. jQuery has a Clip Effect method baked in that I would anticipate should accomplish what you're looking for using considerably less CSS and javascript. See this link: https://api.jqueryui.com/clip-effect/ — Dan Truitt, Jun 26 '17 at 00:55

Dan Truitt · Answer 1 · 2017-06-26T01:28:19.877

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

I'm not 100% sure which element event.clientX-event.target is. I suspect that it is the div of class "activator." Out of all of the CSS that I see, none of that div's ancestors have position "relative," "absolute," or "fixed," so the offset parent is either an element further up your hierarchy, or the window object. Try setting position: relative; on .reveal. If event.clientX-event.target is not the div of class activator, then you're probably getting the position of the cursor relative to the window, in which case you would need to subtract the offset of the .reveal element relative to the window from event.clientX-event.target.offsetLeft. If this is a case, there's a great guide here: How to get an element's top position relative to the browser's window?

CSS clip effect not working properly

1 Answers1