时间戳

首页 > 解决方案 > 平滑过渡悬停图像

css - 平滑过渡悬停图像

问题描述

我已经尝试解决一个问题几个小时，我真的很感激一些帮助。

目标是当您将鼠标悬停在图像上时获得“更平滑的过渡”。我玩弄不透明度等，但没有任何效果。

HTML 代码：

<div class="montage">
    <p>Add</p>
    <img id="montage" src="Imagesnya/montage2.jpg" alt="">
</div>
<div class="borttagning">
    <p>Remove</p>
    <img id="borttagning" src="Imagesnya/borttagning3.jpg" alt="">
</div>

CSS

.borttagning {
    margin-left: 9%;
    margin-top: 31%;
    position: absolute;
}

.borttagning img {
    height: auto;
    width: auto;
    opacity: 0;
}

.borttagning:hover img {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
       -moz-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
}

#borttagning {
    width: 64.0%;
    margin-top: 5.8%;
    margin-left: -24.25%;
}

.montage {
    margin-left: 18%;
    margin-top: 10%;
    position: absolute;
}

.montage img {
    height: auto;
    width: auto;
    opacity: 0;
}

.montage:hover img {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
       -moz-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
}
#montage{ 
    width: 64.0%;
    margin-top: -13.7%;
    margin-left: -23.53%;
}

谁知道我做错了什么？

标签： cssimagetransactionshovercss-transitions

解决方案

试试这个：http: //jsfiddle.net/3fvn8uoa/3/

添加transition正常状态而不是:hover这样做（但是根据我的说法，您的代码也应该可以工作）

更新：看到您在问题评论中提供的网站链接，您正在将 b/w 转换display: none为，因为不支持属性display: block转换，所以不能也不会平滑。display您将实现如上面的 jsfiddle 中所示的内容

推荐阅读