Transform: scaling an image from top to bottom
Is it possible to scale an image from top to bottom using transform in css? I have this instance here: http://jsfiddle.net/865vgz82/13/
Currently, the image in the thumbsskin class is scaled from the center and expanded to the top, bottom and sides. Wish this was fixed from the top, and only shrunk down and down the sides. Is this only possible with 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;}
Thank.
+3
source to share
1 answer
By default, the item converts with it the center point as the source. So in this case it will scale from the center. You can change this by installing transform-origin
as you do.
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>
+4
source to share