CSS overflow not working with transform

Question

I have image that is zoomed on hover, but I want it to stay within the original height and width. I have tried setting overflow:none, but it is still larger than the original size after the transform.

<style type="text/css">
img.image {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
    height:278;
    width:185;
    overflow:hidden;
}

img.image:hover {
    -webkit-transform:scale(1.1); /* Safari and Chrome */
    -moz-transform:scale(1.1); /* Firefox */
    -ms-transform:scale(1.1); /* IE 9 */
    -o-transform:scale(1.1); /* Opera */
    transform:scale(1.1);
    overflow:hidden;
    height:278;
    width:185;
}

</style>

<img class="image" src="http://image.tmdb.org/t/p/w185/l2u1MDnR89ptsKZDxIF4LFTiBWP.jpg">

Answer 1

Here's a working jsfiddle.

If you wrap the image in a div with the overflow:hidden property, then scale the image within that div, it achieves the result you are looking for.

The way you were doing it, the overflow:hidden property was being applied to the image itself. When you scale the image larger, you're just making the image bigger. There is no overflow to hide. Constraining the image within a fixed size div and then scaling the image inside hides the div's overflow (the edges of the image)