Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

I want to Zoom in onto the pencil when hovered over the image.

HTML:

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?

Problem courtesy of: tgun926

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

Solution courtesy of: vals

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×