css scale image toward specific direction

Question

I have the following CSS which allows me to scale an image with an effect. The code works properly scaling the image x6 times.

#helloi {
    width="65px";
    text-decoration: none;
    display: block;
    margin: 0 3px 3px 0;
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1, 1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
#helloi:active {
    width="65px";
    opacity: .9;
    -webkit-transform: scale(6, 6);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(6, 6);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
}

Now I'd like to be able to scale it but toward a specific direction, instead of being scaled to the center, I'd like it to size up toward right respecting its original left side position. here you have a jsfiddle example (click on the image) https://jsfiddle.net/nh40s9sf/

Answer 1

You need to set a transform-origin point.

The default is center center so you can adjust it to:

#CIAOCIAOA {
    transform-origin:bottom left;
}

JSfiddle Demo