Fading in an image as a visual hint on Front using CSS animation

Card Design
#1

I wanted to fade in an image as a visual hint on the front side of the card.
The reason for that is that I would like to avoid to click or hover as much as possible.
For an atomic card where it should be possible to answer within 7 seconds, I chose a fade-in with a delay of (ca.) 5 seconds and completion at second 7.
In case of impatience it’s still possible to reveal the image (or text) immediately by hovering over the div area.

This is the CSS code:

<style>
.fadein {
  animation: 7s ease-in 0s normal forwards 1 fadeIn;
}

.fadein:hover {
  animation: 1s ease-in 1 fadeIn;
}

@keyframes fadeIn {
    0% { opacity:0; }
    80% { opacity:0; }
    100% { opacity:1; }
}

</style>

I think in combination with a random image this could serve well in terms of efficiency.