Плавные переходы при наведении изображения

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 будет работать (однако, по моему мнению, ваш код также должен работать)

Обновление: Увидел ссылку на сайт, который вы указали в комментарии к вопросу, там вы переходите ч / б display: none на display: block, что не может и не будет гладким, потому что переход свойства display не поддерживается , Вы будете реализовывать вещи, как показано выше в jsfiddle