Move large image inside smaller visible container

Tags: , ,



I am trying to do something basic (beginner in programming). I try to take a large image and a smaller container, and move the image up or down inside while the user scrolls.

So you can click here.

Move the yellow up or down while the user can see the red in the same position (kept in doc flow).

If i create an image using this :

<div class="cvrContainer top left">
    <div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>
  1. Should i set cvrPhoto to be larger then cvrContainer say 200% ?
  2. How do i move it up/down with JS while keeping overflow hidden.

I do not ask how to calculate, only how to set it and move the only yellow inside

Answer

I solved it by using css for the inner image (not background image but img tag) :

.prlxPhoto
{

     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translateY(-50%) translateX(-50%);

}

and move it left/right for example with :

var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';


Source: stackoverflow