Question

我想在悬停时放大图片，但我不想让它展开。如果您删除图像上的填充但我出于其他原因需要它可以正常工作。无论如何都要进行转换：scale（）不要越过填充区域？它现在看起来如何：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);

Answer 1

为您提供边框而不是填充？

演示：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);

变换：带有填充的图像上的scale（）

1 个答案: