Как убрать «мерцание» при переключении img sr c при наведении курсора?

Question

http://mintrain.co.uk/portfolio.html

Вот мой тестовый сервер для моего последнего веб-сайта. Возникла проблема с изменением img sr c при наведении курсора. В Safari и Chrome при наведении курсора мыши на изображение оно «мерцает» белым перед отображением изображения. После этого первоначального мерцания повторное зависание работает как задумано. Есть идеи?

HTML:

<div class="gallery">
        <div class="maxw">

            <div class="pbox">
                <div class="image" id="one"></div>
            </div>

            <div class="pbox">
                <div class="image" id="two"></div>
            </div>

            <div class="pbox">
                <div class="image" id="three"></div>
            </div>

            <div class="pbox">
                <div class="image" id="four"></div>
            </div>


        </div>
    </div>

CSS:

.pbox {
    width: 45%;
    height: 500px;
    display: inline-block;
    text-align: center;
}

.image {
    display: block;
    margin: auto;
    width: 300px;
    height: 500px;
}


 #one {
    background: url(/images/portfolio/1.jpg) no-repeat;
    background-size: contain;
    transition: 0.3s;
}


#one:hover {
    background: url(/images/portfolio/1A.jpg) no-repeat;
    background-size: contain;
}

et c et c

Спасибо заранее

Answer 1

В этом конкретном c случае вы можете использовать filter: grayscale(1) и вместо этого переходить.

Но в более общем случае, если у вас было другое изображение, вы могли бы наложить их.

#one:hover {
    background-image: url(/images/portfolio/1A.jpg), url(/images/portfolio/1.jpg);
}

Между прочим, причина мерцания заключается в том, что изменение фонового изображения выгружает текущее и затем загружает новое, что занимает некоторое время, если новое еще не кэшировано.

Answer 2

Вы можете просто сделать

 #one {
    background: url(/images/portfolio/1A.jpg) no-repeat; //same image here
    background-size: contain;
    transition: 0.3s;
    filter: grayscale(100%);

}


#one:hover {
    background: url(/images/portfolio/1A.jpg) no-repeat; //same image here
    background-size: contain;
    filter: grayscale(0%);

}