CSS scale image on hover without changing box size of image (only scale content inside)

Question

Sorry for my bad english first. Hope anybody can help anyway.

I try to achieve the following: Inside a page i have an image. Since it is in Wordpress a non-pro can edit it. I want on mouse-over an image to scale the content of the image inside the box. (so the image itself should not change its size.) i.e. I have an image of 200 x 200 px. On mouse over i want it to still have this size, but the content inside should zoom. Image size can be different. So i never know exakt measures.

It has to be done on the img-tag i think. No chance to put a div or anything around it. Anybody knows the solution?

Edit: So - i want the image on hover be larger, but be cropped to the size of the non-hover status.

Thank you! Mike

Answer 1

It sounds like you need a transform:scale

HTML

<div class="box">
    <img src="http://lorempixel.com/output/city-q-c-200-200-1.jpg" alt=""/>
</div>

CSS

.box {
    width:250px;
    height:250px;
    padding:10px;
    margin: 25px;
    border:1px solid grey;;
}


img {
    display: block;
    transition:all 0.25s ease;
}

.box:hover img {
    -webkit-transform:scale(1.25)
}

JSfiddle Demo

Answer 2

Add the following styling to the .box.

overflow: hidden;