Preload Hero Image on Hover with Just CSS

Here is a little trick to preload a larger image on the next page, when a user hovers over the link to the next page.

<a class="preload-link" href="/next-page" style="--bg:url('');">Kitty</a>

<a class="future-preload-link" href="/next-page" data-preload="">Future Kitty</a>

    background-image: var(--bg);

    background-image: attr(data-preload url);

Maybe, in the future, the second example with using attr() will be possible1

codepen - live use case