Question

I have the following HTML:

<figure>
  <img src="http://lorempixel.com/200/200/" alt="">
  <figcaption>This is the caption</figcaption>
</figure>

And the following CSS:

figure {
  background: #ddd;
  display: inline-block;
  height: 200px;
  margin: 50px;
  position: relative;
  width: 200px;
  vertical-align: top;
}
figure:hover img {
  box-shadow: 0 30px 20px -10px hsla(0,0%,0%,.25);
  transform: perspective(1000px) rotateX(45deg);
  transform-origin: 50% 0;
}
img {
  position: relative;
  transition: .2s;
  vertical-align: top;
  z-index: 10;
}
figcaption {
  bottom: 0;
  box-sizing: border-box;
  padding: 6px;
  position: absolute;
  text-align: center;
  width: 100%;
}

Here is a live example: http://codepen.io/joshnh/pen/FlvJr

Despite setting the transform-origin to the top of the image, it still moves down slightly when hovering. What is causing this, and how do I prevent it?

Answer 1

Take a look: http://jsfiddle.net/cQphE/

The problem was that you were transitioning, along with the transform property, the transform-origin. On hover it was going from the default 50% 50% to the 50% 0; you set.

You have this:

img {
  transition: 0.2s;
}

figure:hover img {
  box-shadow: 0 30px 20px -10px hsla(0,0%,0%,.25);
  transform: perspective(1000px) rotateX(45deg);
  transform-origin: 50% 0;
}

Which is the same as having this:

img {
  box-shadow: none;
  transform: perspective(0) rotateX(0);
  transform-origin: 50% 50%;
  transition: 0.2s;
}

figure:hover img {
  box-shadow: 0 30px 20px -10px hsla(0,0%,0%,.25);
  transform: perspective(1000px) rotateX(45deg);
  transform-origin: 50% 0;
}

What you should have is this:

img {
  transform-origin: 50% 0;
  transition: 0.2s;
}

figure:hover img {
  box-shadow: 0 30px 20px -10px hsla(0,0%,0%,.25);
  transform: perspective(1000px) rotateX(45deg);
}