CSS Tip

3D parallax effect on hover

After the previous effect, I am trying another concept of 3D parallax effect with a better illusion!

A 3D parallax effect on images

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;
}
img:hover {
  --_i: -1;
  padding-inline: 0 calc(var(--s)/10);
}

I am actually using 2 different images but only one image element is used in the code.

See the Pen 3D parallax effect on hover by Temani Afif (@t_afif) on CodePen.

More CSS Tips