如何在 css 中平滑悬停时为背景图像大小设置动画？

Question

我有一个带有背景图片的 div。悬停时，我希望图像稍微放大。我让它工作（见小提琴），但我希望它在 0.3 秒内平滑地动画，然后平滑地返回而不是跳跃。

我该怎么做呢？

https://jsfiddle.net/ufgnroor/2/

HTML

                 <div class="portfolio-item">

                </div>

CSS

 .portfolio-item {
height: 300px;
position: relative;
text-align: center;
cursor: pointer;
margin-bottom: 20px;
background-position: center;
background-size: cover;
background-image: url('http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg');
}

.portfolio-item:hover {
background-size: 150%;
-webkit-transition: all 0.3s ease-in-out;
}

原文由 user3589485 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用变换比例。您还需要一个包装器，以便图像剂量溢出

<div class="wrapper">
    <div class="portfolio-item">
    </div>
</div>

.portfolio-item:hover {
    -webkit-transform: scale(1.5,1.5);
    -webkit-transition: all 0.3s ease-in-out;
}

演示

原文由 Tasos 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于您的情况，您必须在悬停之前设置背景大小和过渡：

 .portfolio-item {
    background-size: 100%;
    -webkit-transition: all 0.3s ease-in-out;
}

.portfolio-item:hover {
    background-size: 150%;
}

https://jsfiddle.net/gv5pjqok/1/

原文由 Lynch Cai 发布，翻译遵循 CC BY-SA 4.0 许可协议