<div class="menu">
<div class="fancy-hover">
<i class="fa fa-pencil" aria-hidden="true"></i> Edit
</div>
<div class="fancy-hover">
<i class="fa fa-sort" aria-hidden="true"></i> Sort
</div>
<div class="fancy-hover">
<i class="fa fa-star" aria-hidden="true"></i> Add
</div>
<div class="fancy-hover fancy-hover--blue">
<i class="fa fa-share-square-o" aria-hidden="true"></i> Export
</div>
<div class="fancy-hover">
<i class="fa fa-trash-o" aria-hidden="true"></i> Delete
</div>
</div>
:root {
--px: 0;
--py: 0;
}
.fancy-hover {
background: #242424;
background: rgba(36,36,36,0.9);
color: #FFF;
display: flex;
align-items: center;
cursor: pointer;
padding: 1em 1em;
position: relative;
overflow: hidden;
border-bottom: solid 1px #333;
z-index: 2;
transition: background-color 0.2s linear;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fancy-hover:before,
.fancy-hover:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: opacity 0.1s linear;
}
.fancy-hover:before {
width: 160px;
height: 120px;
background: radial-gradient(circle at center, #FFF 0%, transparent 60%);
opacity: 0;
mix-blend-mode: screen;
transform: translate(
calc( var(--px) * 1px ),
calc( var(--py) * 1px )
) translate(-50%, -50%);
}
.fancy-hover:after {
background: inherit;
margin: 2px;
top: 0; right: 0; bottom: 0; left: 0;
opacity: 0;
transition-delay: 0.05s;
}
.fancy-hover:hover { background-color: rgba(56,56,56,0.9); }
.fancy-hover:hover:before { opacity: 0.6; }
.fancy-hover:hover:after { opacity: 0.85; transition-delay: 0s; }
.fancy-hover--blue:hover { background-color: #24455E; }
.menu { overflow: hidden; border: solid 1px #444444; width: 15em; border-radius: 3px; opacity: 0.958; }
.menu :last-child { margin-bottom: 0; }
.fa { width: 1.25em; margin-right: 0.5em; font-size: 1.25em; text-align: center; }
html { height: 100%; display: flex; overflow: hidden; }
body { max-width: 90%; margin: auto; background: #000; }
body:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url(https://unsplash.it/600/600?image=992);
background-size: cover;
background-position: center center;
z-index: -1;
opacity: 0.9;
margin: -7px;
filter: blur(6px);
}
Array.from(
document.querySelectorAll('.fancy-hover'),
function(el){
el.addEventListener('mousemove',function(e){
el.style.setProperty('--px', e.clientX - el.offsetLeft);
el.style.setProperty('--py', e.clientY - el.offsetTop);
});
});