Question

我有一个具有背景图像的div，我试图实现的是当我将鼠标悬停在div上时，图像应随着过渡而减小尺寸。

但是我面临的问题是，当我将鼠标悬停在div上时，div正在减小高度，同时我可以看到图像看起来有点晃动，我可以避免这种情况吗？

这是一个CodePen示例。

我的CSS：

.img-holder{
    height:217px;
    width:543px;
    background:#dedede;
    position:relative;

    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
  background-image: url('https://netcomtech.co.uk/wp-content/uploads/2017/02/Workspace.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.img-holder:hover{
    height:157px;
    opacity:0.9;
    -webkit-transform: scale(1.0) !important;
    transform: scale(1.0) !important;
}

Answer 1

.image-sect {
  width: 543px;
  height: 217px;
  display: block;
}
.img-holder{
    height:217px;
    width:100%;
    display: block;
    background:#dedede;
    position:relative;
    -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
}
.img-holder img {
    height:100%;
    width:100%;
    object-fit: cover;
    object-position: top;
}
.bg-img{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    display: inline-block;
    background-size: cover;
    -webkit-box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
}


.image-sect:hover .img-holder{
    height: 157px;
}

<div class="image-sect">
    <div class="img-holder">
        <img src="https://netcomtech.co.uk/wp-content/uploads/2017/02/Workspace.jpg" alt="" />
    </div>
</div>

<div class="image-holder">
    <div class="bg-image" />
    <div class="content">
    
    </div>
<div>

Answer 2

您只需从CSS删除此代码即可解决您的问题。

.img-holder:hover{
        height:157px;
        -webkit-transform: scale(1.0) !important;
        transform: scale(1.0) !important;
    }

鼠标悬停时如何停止图像颤抖？

2 个答案: