Photo Frame With Parallax Tilt Effect

Preview:

Description:

A modern photo frame with an interactive parallax tilt effect, built with vanilla JavaScript and CSS/CSS3.

How to use it:

1. Add images to the photo frame.

<div class="container">
  <div class="card-container">
    <div class="card">
      <img class="background" src="bg-1.jpg" alt="" />
      <img class="foreground" src="fg-1.png" alt="" />
    </div>
    <div class="card">
      <img class="background" src="bg-2.jpg" alt="" />
      <img class="foreground" src="fg-2.png" alt="" />
    </div>
    <div class="card">
      <img class="background" src="bg-3.jpg" alt="" />
      <img class="foreground" src="fg-3.png" alt="" />
    </div>
  </div>
</div>

2. The necessary CSS styles.

.container {
  transform-style: preserve-3d;
  border-radius: 30px;
  background: #333;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
  padding: 15px;
}
.container .card-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.container .card-container .card {
  height: 350px;
  width: 250px;
  overflow: hidden;
  position: relative;
  margin: 15px;
  border-radius: 15px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.9);
  border: 4px solid #fff;
}
.container .card-container .card .background {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1.1);
  filter: blur(2.5px);
}
.container .card-container .card .foreground {
  position: absolute;
  bottom: -25px;
  left: 0;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
}

3. The main script to enable the parallax tilt effect.

let container = document.querySelector(".container");
let foregrounds = document.querySelectorAll(".foreground");
document.body.addEventListener("mousemove", (e) => {
  let x = (window.innerWidth / 2 - e.pageX) / 30;
  let y = (window.innerHeight / 2 - e.pageY) / 30;
  container.style.transform = `rotateX(${-y}deg) rotateY(${-x}deg)`;
  [].forEach.call(foregrounds, (foregrounds) => {
    foregrounds.style.transform = `translateY(${y}px) translateX(${x}px)`;
  });
});