Your approach to preloading content is strong, but consider removing the double slashes from the URLs in the :hover declarations.
For instance, browsers like Chrome may treat these two URLs as separate images:
https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif
https://couill.art//wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif
Note: While this fix resolves flickering on Chrome, it may introduce issues on Firefox. One solution is to avoid targeting a elements with :hover, as the img tag already covers their background. Simply use:
.project-panel .pp-thumb a[title="Danger Zone"] {
background: url(https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif) no-repeat;
background-size: contain;
}
By setting the visibility of the img to hidden on hover, you can display the animation smoothly without any flickering.
Below is the corrected CSS code snippet that should work effectively:
.project-panel .pp-thumb a[title="Danger Zone"] {
background: url(https://couill.art/wp-content/uploads/2018/06/Danger-Zone-Logo-website-thumbnail.gif) no-repeat;
background-size: contain;
}
.project-panel .pp-thumb a[title="Dangerz"] {
background: url(https://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif) no-repeat;
background-size: contain;
}
.project-panel .pp-thumb a[title="Danger II"] {
background: url(https://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-1.gif) no-repeat;
background-size: contain;
}
.project-panel .pp-thumb a[title="About"] {
background: url(https://couill.art/wp-content/uploads/2018/05/chauve-souris-anim.gif) no-repeat;
background-size: contain;
}
You can view a live example here.