CODEWITHSUNDEEP
htmlcss
sjf
sjf

Reputation: 800

CSS overflow not working with transform

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">

Upvotes: 3

Views: 3874

Answers (3)

Guarana
Guarana

Reputation: 195

Look this result. link

You need use block for overflow:hidden

Upvotes: 0

Ganesh Yadav
Ganesh Yadav

Reputation: 2685

use a div container for it and put image inside and and overflow:hidden;

demo here

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

.img-xon{
height:278;
width:185;
overflow:hidden;
}
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;
}

img.image:hover {
overflow:hidden;
height:278;
width:185;
}

Upvotes: 1

Tim McClure
Tim McClure

Reputation: 1192

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)

Upvotes: 4

Related Questions