← All elements
<div class="rf"><b>Design</b><p>Hover to flood the card with colour.</p></div>About this card
A card whose background floods outward from a corner circle on hover and flips the text colour to match.
How it works
A circle sits in the top-right corner behind the text using z-index minus one inside an isolated stacking context. On hover it scales up seven times, which floods the whole card, and the text colour transitions to white at the same time.
Ways to customise it
- Edit the scale for a faster or slower flood.
- Move the circle to another corner.
- Change #6366f1.
Good to know
Text colour changes must keep contrast in both states. The isolation property keeps the pseudo-element from escaping behind the page background.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.