平滑过渡悬停图像

Question

我已经试着解决一个问题好几个小时了，我真的很想得到一些帮助。

目标是得到一个“更平稳的过渡”，当图像移动时，你悬停在它上面。我玩的不透明等，没有什么工作。

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%;
}

有人知道我做错了什么吗？

Answer 1

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

在正常状态下添加transition而不是:hover将完成这一任务(不过，根据我的说法，您的代码也应该能工作)

更新:看到您在评论中提供的对问题的链接，您正在将b/w display: none转换为display: block，这不能也不会顺利，因为不支持display属性的转换。您将实现如上面的jsfiddle所示的东西