How to zoom in to a specific point smoothly with CSS?

css, html

Solution

Take the answer from SW4 and change the left and top changes for a transform origin

#image {
    background-image: url('http://i.imgur.com/n9q7jhm.jpg');
    background-size: 400px 267px;
    background-position:center;
    transition: all 1s ease;
    width:100%;
    height:100%;
    transform: scale(1);
    position:relative;
    left:0;
    top:0;
    -webkit-transform-origin: 75% 75%;
    transform-origin: 75% 75%;
}
#wrapper:hover #image {
    -webkit-transform: scale(2);
    transform: scale(2);
}

The 75% 75% is more or less the position of the pencil , but you can set it to whatever you want.

fiddle

Problem

I want to zoom in onto the pencil when hovered over the image. HTML: ``` <div> </div> ``` CSS: ``` div { width: 400px; height: 267px; border: 1px solid black; background-image: url('http://i.imgur.com/n9q7jhm.jpg'); background-size: 400px 267px; transition: all 1s ease; } div:hover{ background-size: 500px 333px; background-position: -60px -60px; } ``` JSFiddle: http://jsfiddle.net/AX59Y/ My naive attempt was to increase the size and change the position of the image, however as you can see from the jsfiddle, the transition is very jagged as it tries to accomplish both transitions at the same time. Is there a better way?

Original source