Photo film gallery

<div class="Container">
    <!-- last card -->
    <div class="Picture">
      <img class="Picture-img" src="https://images.unsplash.com/photo-1684857580926-600f51d54175?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="" />

      <div class="Picture-note"><span> Web girls <a class="Network" href="" target="_top"> </a><a class="Network" href="#" target="_top"><img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" alt="twitter" /></a></span></div>
    </div>

    <!-- other cards -->
    <div class="Picture">
      <img class="Picture-img" src="https://picsum.photos/id/733/400" alt="" />
      <div class="Picture-note"><span>Over the clouds</span></div>
    </div>
    <div class="Picture">
      <img class="Picture-img" src="https://picsum.photos/id/613/400" alt="" />
      <div class="Picture-note"><span>Golden Gate Bridge - San Francisco</span></div>
    </div>
    <div class="Picture">
      <img class="Picture-img" src="https://picsum.photos/id/40/400" alt="" />
      <div class="Picture-note"><span>Cat nose</span></div>
    </div>
    <div class="Picture">
      <img class="Picture-img" src="https://picsum.photos/id/465/400" alt="" />
      <div class="Picture-note"><span>Mountain</span></div>
    </div>
    <div class="Picture">
      <img class="Picture-img" src="https://picsum.photos/id/1029/400" alt="" />
      <div class="Picture-note"><span>Central Park - New York</span></div>
    </div>
    <div class="Picture">
      <img class="Picture-img" src="https://picsum.photos/id/923/400" alt="" />
      <div class="Picture-note"><span>Autumn</span></div>
    </div>
    <div class="Picture">
      <img class="Picture-img" src="https://picsum.photos/id/425/400" alt="" />
      <div class="Picture-note"><span>Coffee</span></div>
    </div>
    <div class="Picture">
      <img class="Picture-img" src="https://picsum.photos/id/200/400" alt="" />
      <div class="Picture-note"><span>An Irish cow enjoying the wind on the beach</span></div>
    </div>
    <div class="Picture">
      <img class="Picture-img" src="https://picsum.photos/id/244/400" alt="" />
      <div class="Picture-note"><span>pelicans at the water's edge</span></div>
    </div>
    <div class="Picture">
      <img class="Picture-img" src="https://picsum.photos/id/15/400" alt="" />
      <div class="Picture-note"><span>Waterfall</span></div>
    </div>
  </div>

@import url("https://fonts.googleapis.com/css2?family=Caveat");

.Container {
  position: absolute;
  top: 50%;
  left: 50%;
}

.Picture {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid #fff;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  user-select: none;
  cursor: pointer;
}

.Picture-img {
  display: block;
  width: 300px;
  height: 300px;
  pointer-events: none;
}

.Picture-note {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 70px;
  padding: 12px 24px;
  font-size: 1.5rem;
  text-align: center;
}

.Network {
  display: inline-block;
  padding: 0 5px;
}

.Network img {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  vertical-align: middle;
}

/* --------------------- */
/* Other styles          */
/* --------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Caveat', serif;
  overflow: hidden;
}

const pictures = document.querySelectorAll('.Picture');
var previousTouch = undefined;

function updateElementPosition(element, event) {
  var movementX, movementY;

  if (event.type === 'touchmove') {
    const touch = event.touches[0];
    movementX = previousTouch ? touch.clientX - previousTouch.clientX : 0;
    movementY = previousTouch ? touch.clientY - previousTouch.clientY : 0;
    previousTouch = touch;
  } else {
    movementX = event.movementX;
    movementY = event.movementY;
  }
  
  const elementY = parseInt(element.style.top || 0) + movementY;
  const elementX = parseInt(element.style.left|| 0) + movementX;

  element.style.top = elementY + "px";
  element.style.left = elementX + "px";
}

function startDrag(element, event) {
  const updateFunction = (event) => updateElementPosition(element, event);
  const stopFunction = () => stopDrag({update: updateFunction, stop: stopFunction});
  document.addEventListener("mousemove", updateFunction);
  document.addEventListener("touchmove", updateFunction);
  document.addEventListener("mouseup", stopFunction);
  document.addEventListener("touchend", stopFunction);
}

function stopDrag(functions) {
  previousTouch = undefined;
  document.removeEventListener("mousemove", functions.update);
  document.removeEventListener("touchmove", functions.update);
  document.removeEventListener("mouseup", functions.stop);
  document.removeEventListener("touchend", functions.stop);
}

pictures.forEach(picture => {
  const range = 100;
  const randomX = Math.random() * (range * 2) - range;
  const randomY = Math.random() * (range * 2) - range;
  const randomRotate = Math.random() * (range / 2) - range / 4;
  const startFunction = (event) => startDrag(picture, event);
  picture.style.top = `${randomY}px`;
  picture.style.left = `${randomX}px`;
  picture.style.transform = `translate(-50%, -50%) rotate(${randomRotate}deg)`;
  picture.addEventListener("mousedown", startFunction);
  picture.addEventListener("touchstart", startFunction);
});