Background image flickering on hover

Specifying one file as the background for an element and a second file for the hover effect is bad practice. To download any file, the browser needs to spend at least 0.1 seconds even on the fastest Internet connection. It turns out that at this very moment the element remains without a background. It looks like a blink, flicker or glitch of the background image.

Here’s what code causes the flicker effect:

.block {
    background-image: url(./photo.jpg);
}
.block:hover {
    /*When a background is specified in a style with a pseudo-class, it causes a display delay*/
    background-image: url(./photo-hover.jpg);
}

Such a defect is perceived as a visual defect, and worsens the image of the site in the eyes of the visitor.

Interactive example:

Demonstration

PHP code

Open a demo Download the example code

<?php
if(isset($_GET['photo'])) {
    usleep(100000);
    header('Content-Type: image/jpeg');
    echo file_get_contents('photo-hover.jpg');
    die;
}
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .block {
                width: 300px;
                height: 300px;
                background-size: contain;
                background-image: url(./photo.jpg?&t=<?=microtime(true)?>);
            }
            .block:hover {
                background-image: url(./background_is_changing.php?photo=1&t=<?=microtime(true)?>);
            }
            .btn {
                color: #000;
                display: inline-block;
                margin-bottom: 5px;
                text-decoration: none;
                padding: 5px 10px;
                border: 1px solid #000;
                border-radius: 5px;
            }
            .btn:hover {
                background-color: #ddd;
            }
            .btn.active {
                background-color: #000;
                color: #fff;
            }
        </style>
    </head>
    <body style="font-family: sans-serif;">
        <a class="btn" href="./background_is_changing.php">Обновить страницу</a><br />
        <h1>Наведите курсор на картинку, чтобы она поменяла фон</h1>
        <p>После первого наведения картинка закешируется и моргание пропадёт. Чтобы увидеть его снова, обновите страницу.</p>
        <div class="block"></div>
    </body>
</html>

Tariff plans for working with the service

Service test

1 page per month

0₽ per page

For 1 site

Free of charge

Tools available:

One-time verification

pages by 10 day

6.6₽ per page

For 1 site

990₽ / one-time

Tools available:

Select

Subscription

pages by 30 day

₽ per page

Any website

/ month

Tools available:

Additional pages

For an active subscription

spend during the year

Any website

*0.3 - 3₽ / 1 page

Additional pages for the Subscription plan.

Adding funds via your merchant profile.

*The price depends on the active subscription. The more expensive the tariff, the cheaper the additional pages.