Glare Layer of Pokemon cards implemented in CSS and javascript

In the previous post I explained how to add the mask layer to the pokemon card. Now we will look at the glare layer.

The glare layer is pretty subtle but adds a kind-of spotlight effect making the card seem to reflect light as it moves. This is accomplished using a div that sits in front of all the layers and blends in a radial-gradiant background that moves with the mouse.

Here's the HTML. The new element has class card__glare:

<div class="card" id="holocard">
    <div class="card__rotator">
        <div class="card__front">
            <img src="/images/matt-pokemon.png" width="330" height="460" />
            <div class="card__shine"></div>
            <div class="card__glare"></div>
        </div>
    </div>
</div>

In the CSS, the div is styled with background-image: radial-gradiant:

.card_glare {
    background-image: radial-gradient(
        circle at var(--pointer-x) var(--pointer-y),
        rgb(255, 255, 255) 0%,
        rgba(134, 138, 141, 0.33) 45%,
        rgba(51, 51, 51, 0.9) 130%
    );
    opacity: 0.5;

    mix-blend-mode: hard-light;
    filter: brightness(.9) contrast(1.75);
}

Note the use of --pointer-x/y variables which are set by javascript to percentage values from the top left corner. The opacity is static in this case. Other cards vary the opacity so that the glare layer becomes invisible towards the center of the card and is stronger when the mouse moves to the edges. That gives a metallic effect where as the effect for this card is more of plastic.

Here's what it looks like on its own (you might need to hover the mouse to make it show up)

And here it is on the card. This is very close to the finished card. There are some more subtle details in the actual pokemon-cards-css files but we've covered the basics here and hopefully you learned as much as I did!