A Balatro-style Holographic Card Hover Effect

Balatro’s hover effect on cards is the perfect example of UI juice that just makes you have fun without even “playing”. I was inspired to do a similar effect on the web.

Source: element.mjs, element.css, and this HTML:

<wavebeem-balatro-pog>
  <div data-element="background"></div>
  <div data-element="rainbow"></div>
  <div data-element="shine"></div>
  <img
    data-element="image"
    alt=""
    src="./assets/photo.webp"
    width="800"
    height="800"
  />
</wavebeem-balatro-pog>