Skip to content

Instantly share code, notes, and snippets.

@hdelei
Created September 14, 2019 01:44
Show Gist options
  • Save hdelei/c4adab1aaed1e9e5795af8eef122e9fe to your computer and use it in GitHub Desktop.
Save hdelei/c4adab1aaed1e9e5795af8eef122e9fe to your computer and use it in GitHub Desktop.
Fluent design - Reveal highlight
<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>
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`;
});
});
});
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment