Interactive 3D Parallax Effect on Hover with Pure CSS/CSS3

The 3D parallax effect adds depth to web elements through perspective-based transformations.

It creates an interactive hover effect where images shift dynamically as your hover over them.

How to use it:

1. Place your foreground image on the webpage.

<img src="foreground.png" alt="" />

2. Apply the background image to your foreground image and use CSS to implement the parallax effect.

img {
  --s: 300px; /* the image size */
  width: var(--s);
  aspect-ratio: 1;
  box-sizing: border-box;
  padding-inline: calc(var(--s)/10) 0;
  object-fit: cover;
  border-radius: 20px;
  transform: perspective(350px) rotateY(calc(var(--_i,1)*10deg));
  transition: .5s;
  cursor: pointer;
  background: url(https://picsum.photos/id/776/400/500) 50%/cover;
}
img:hover {
  --_i: -1;
  padding-inline: 0 calc(var(--s)/10);
}

How it works:

The effect works by combining CSS transformations and the perspective property. When the user hovers over the image, CSS rotates the image slightly on the Y-axis, which creates the 3D effect.

The background image gives the illusion of depth, while the foreground image shifts slightly with the mouse movement. The transform property adjusts the image’s rotation, making it appear to move in three-dimensional space based on user interaction.