Transform: scale an image from top to bottom

Question

Is it possible to scale a image from top to bottom, using transform on css? I have this instance here: http://jsfiddle.net/865vgz82/13/

Currently, the image in the class thumbsskin scales from the center, and expands to top, bottom and sides. It'd like to have it fixed on the top, and only scale down and to the sides. Is that possible with only css?

.thumbsskin img {
  height: 135px;
  width: 320px;
  top: 0;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.thumbsskin:hover img {
  opacity: 0;
  -webkit-transform: scale(1.9);
  transform: scale(1.9);
  transform-origin: top;
}

Answer 1

By default, an element transforms with it's center point as the origin. So in this case it will scale from the center on out. You can change this by setting transform-origin, like you did.

Simple example:

div {
    margin: 3em auto;
    width: 50px;
    height: 50px;
    background: red;
}

div:hover {
    transform: scale(1.9);
}

.d2 {
    transform-origin:  top;
}

<div></div>
<hr />
<div class="d2"></div>