我有一个带背景图片的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;
}
答案 0 :(得分:2)
使用变换比例。你也需要一个包装器,以便图像剂量溢出
<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;
}
答案 1 :(得分:2)
对于您的情况,您必须在悬停之前设置背景大小和过渡:
.portfolio-item {
background-size: 100%;
-webkit-transition: all 0.3s ease-in-out;
}
.portfolio-item:hover {
background-size: 150%;
}
答案 2 :(得分:0)
而不是使用background-size:150%使用转换。这是一个例子:
.portfolio-item:hover {
transform: scale(1.5);
transition: all 2s ease-in;
}