user2142581 user2142581 - 2 months ago 7
CSS Question

Translating a div to the right and have it disappear behind an invisible line

Alright so the way i asked the question isn't the greatest because I'm not too sure on how to even explain what I'm trying to figure out.

https://jsfiddle.net/ff9ovhvp/

<div class="row">
<div class="img">
<img src="https://placehold.it/300x100">
</div>
</div>

.row{
border: 2px solid black;
width:500px;
}
img{
transition: 3.5s;
}
img:hover{
transform:translateX(500px);
}


If you look at the code I posted above, I'm trying to have that placeholder image disappear as it passes through the right border. Not have it phase out or disappear all at once but have it seem like it is being pushed behind a wall or a barrier, sort of like a little pocket and then have it slide out of there once the cursor is no longer hovering the image.

Answer

I would use an animation, not merely a transition.

I also would base the animate upon the hover state of the image parent div, not the image itself. If you base hover events on the image, and the image moves... that means the cursor position can (and will) alter the transition/animation because the image moves under the cursor... so it is 100% possible for the image to move so "hover" is no longer true.

.row{
  border: 1px solid #aaa;
  width:500px;
  background: #eee;
  margin: 10px; 
  box-shadow: inset 0 0 15px #ccc, inset 0 0 35px #ddd; 
  border-radius: 10px;
  
  /* hide overflow of container div */
  overflow: hidden;
}

/* set image holder to 100%% width of parent */
.imgHold { width: 100%; position: relative; left:0; }
img { display: block;}

/* animate the IMAGE on hover of the parent div
   this prevents the hover state causing the
	animation to be "jerky" because the image
	moves under the cursor. */
.imgHold:hover img{
	position: relative;
  animation: toRight 2s 1 forwards;
}

@keyframes toRight {
	from { left: 0%;}
	to { left: 110%;}
}
<div class="row">
  <div class="imgHold">
    <img src="https://placehold.it/300x100">
  </div>
</div>

Pet Peeve: Do not name classes and ID the same as standard HTML tags. It's bad practice and only causes confusion should editing in the future be required.