CODEWITHSUNDEEP
imagecssscalecss-transforms
Gabrielle
Gabrielle

Reputation: 135

Transform: scale an image from top to bottom

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;
}

Upvotes: 12

Views: 19539

Answers (1)

Stephan Muller
Stephan Muller

Reputation: 27600

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>

Upvotes: 22

Related Questions