CODEWITHSUNDEEP
htmlcsstransformscale
Benny
Benny

Reputation: 857

transform:scale() on image with padding

I want to zoom in on the image on hover but I don't want to it to expand. works fine if you remove the padding on the image but i need it for other reasons. Is there anyway to make the transition:scale() not to go over the padding area? How it looks now: https://jsfiddle.net/8u84shbe/

HTML:

<div class="item">
    <img src="http://s12.postimg.org/db0vuer0t/Koala.jpg">
</div>
<div class="item">
    <img src="http://s12.postimg.org/db0vuer0t/Koala.jpg">
</div>
<div class="item">
    <img src="http://s12.postimg.org/db0vuer0t/Koala.jpg">
</div>
<div class="item">
    <img src="http://s12.postimg.org/db0vuer0t/Koala.jpg">
</div>

CSS:

.item {
    display: inline-block;
    overflow: hidden;
}
.item img {
    max-width: 100%;
    display: block;
    width: 200px;
    height: 200px;
    line-height: 0;
    overflow: hidden;
    padding:10px;
}
.item img:hover {
    opacity: 0.2;
    -webkit-transition: all 1s ease;
    /* Safari and Chrome */
    -moz-transition: all 1s ease;
    /* Firefox */
    -o-transition: all 1s ease;
    /* IE 9 */
    -ms-transition: all 1s ease;
    /* Opera */
    transition: all 1s ease;
    -webkit-transform:scale(1.25);
    /* Safari and Chrome */
    -moz-transform:scale(1.25);
    /* Firefox */
    -ms-transform:scale(1.25);
    /* IE 9 */
    -o-transform:scale(1.25);
    /* Opera */
    transform:scale(1.25);

Upvotes: 0

Views: 1322

Answers (1)

K K
K K

Reputation: 18099

Will giving border instead of padding work for you?

Demo: https://jsfiddle.net/8u84shbe/1/

CSS:

.item {
    display: inline-block;
    overflow: hidden;
    border:10px solid #FFF;
}
.item img {
    max-width: 100%;
    display: block;
    width: 200px;
    height: 200px;
    line-height: 0;
    overflow: hidden;
}
.item img:hover {
    opacity: 0.2;
    -webkit-transition: all 1s ease;
    /* Safari and Chrome */
    -moz-transition: all 1s ease;
    /* Firefox */
    -o-transition: all 1s ease;
    /* IE 9 */
    -ms-transition: all 1s ease;
    /* Opera */
    transition: all 1s ease;
    -webkit-transform:scale(1.25);
    /* Safari and Chrome */
    -moz-transform:scale(1.25);
    /* Firefox */
    -ms-transform:scale(1.25);
    /* IE 9 */
    -o-transform:scale(1.25);
    /* Opera */
    transform:scale(1.25);

Upvotes: 1

Related Questions