set the image's origin with css on hover

i want to enlarge an image on hover with css. but w开发者_JS百科hen it grows, it grows from the top-left. how can i make it grow from the center?

Unless I'm missing something obvious, I think you'll have to manually offset the img on :hover:

See: http://jsfiddle.net/QwvRk/

img {
    position: relative
}
img:hover {
    width: 150px;
    height: 150px;
    top: -25px;
    left: -25px
}

You need to animate the size and placement at the same time. As far as i know, the only way to do that is with an absolutely positioned item. So if you are using jQuery it would be:

$('#selector').animate({
top: -=20px,
height: += 20px,
width: += 20px}, 250);