Fluent design - Reveal highlight

fluent-design-reveal-highlight.markdown

Fluent design - Reveal highlight

A Pen by Michael on CodePen.

License.

index.html

<div class="container">
    <button class="reveal">1</button>
    <button class="reveal">2</button>
    <button class="reveal">3</button>
    <button class="reveal">4</button>
    <button class="reveal">5</button>
    <button class="reveal">6</button>
    <button class="reveal">7</button>
    <button class="reveal">8</button>
    <button class="reveal">9</button>
    <button class="reveal">10</button>
    <button class="reveal">11</button>
    <button class="reveal">12</button>
    <button class="reveal">13</button>
    <button class="reveal">14</button>
    <button class="reveal">15</button>
    <button class="reveal">16</button>
    <button class="reveal">17</button>
    <button class="reveal">18</button>
    <button class="reveal">19</button>
    <button class="reveal">20</button>
    <button class="reveal">21</button>
    <button class="reveal">22</button>
    <button class="reveal">23</button>
    <button class="reveal">24</button>
    <button class="reveal">25</button>
</div>

script.typescript

addEventListener('DOMContentLoaded', () => {
    const maskSize = 150;
    const elements = Array.from(document.querySelectorAll('.reveal'));

    addEventListener('mousemove', (event) => {        
        elements.forEach((element) => {
            const {top, left, width, height} = element.getBoundingClientRect();
            const x = event.pageX - left - maskSize / 2;
            const y = event.pageY - top - maskSize / 2;

            element.style.webkitMaskPosition = `${x}px ${y}px`;
            element.style.webkitMaskSize = `${maskSize}px ${maskSize}px`;
        });
    });
});

style.css

body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    background-image: linear-gradient(to bottom right,  hsl(240, 0%, 20%), hsl(240, 0%, 10%));
    background-size: cover;
}

.container {
    display: grid;
    grit-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(5, 1fr);
}

button { 
    display: block;
    padding: 1rem;
    
    background-color: transparent;
    border: none;
    color: hsl(240, 0%, 90%);
    
    transition-property: background-color;
    transition-duration: 0.2s;
}

button:hover {
    background-color: hsla(240, 0%, 100%, 0.1);
}

button:focus {
    outline: none;
}

button:active {
    background-color: hsla(240, 0%, 100%, 0.2);
}

.reveal {
    position: relative;
}

.reveal:hover::before {
    background-color: hsla(240, 0%, 50%, 0.5);
}

.reveal::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    border: 1px solid hsla(240, 0%, 100%, 0.5);
    
    mask-image: radial-gradient(circle closest-side, white, transparent);
    mask-origin: border-box;
    mask-position: inherit;
    mask-size: inherit;
    mask-repeat: space;
}