Problem with box-shadow covering my whole page - html

Question

Currently working on a cursor that shows text in a div when hovering over it and hides the rest of the div with box-shadow. My problem is that the box-shadow is covering my whole page and I only want to cover the div where the text is showed.
I've tried fixing this with z-index but I think it's not a good idea to give every element a position with a z-index. So I've been trying to use position relative which doens't hide the rest of the page but then it won't be showing the text when hovering on it.
It's suppose to do this when hovering over it with the cursor with out covering the rest like the second picture
But then it won't show the text when I put in position: relative; in .test
.container .pageBlock .googleBlock {
width: 1100px;
margin: 0 auto;
padding: 0 30px;
max-width: 100%;
box-sizing: border-box;
cursor: url(../img/vergrootglas.png) 55 30, auto;
}
.container .pageBlock .googleBlock .title {
font-size: 14px;
font-weight: 200;
margin-left: 40px;
}
.container .pageBlock .googleBlock .test {
overflow: hidden;
position: relative;
}
.container .pageBlock .googleBlock .test .cursor {
position: absolute;
z-index: 1;
background: transparent;
width: 35px;
height: 35px;
opacity: 0.9;
border-radius: 50%;
box-shadow: 0 0 0 9999px #2D2D2D;
}
.container .pageBlock .googleBlock .test #maskOverlay {
width: 100%;
height: 100%;
}
.container .pageBlock .googleBlock .test .wrapper {
list-style: none;
display: inline-block;
width: 33%;
position: relative;
}
.container .pageBlock .googleBlock .test .wrapper .list ul {
list-style: none;
}
.container .pageBlock .googleBlock .test .wrapper .list ul > li:before {
content: "- ";
}
.container .pageBlock .googleBlock .test .wrapper .list li {
line-height: 28px;
}
<section class="googleBlock">
<h1 class='title'>Oh ja, en voor <strong>Google</strong>, voor als je mee leest...</h1>
<div class="test">
<div id="maskOverlay">
<div class="wrapper">
<div class="list">
<ul>
<li>Website laten maken</li>
<li>Online marketing bureau</li>
<li>Website maker</li>
<li>Website bouwen</li>
<li>Webdesign</li>
<li>Digital agency</li>
<li>Websites</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="list">
<ul>
<li>Grafisch ontwerper</li>
<li>Serious Game</li>
<li>Design bureau</li>
<li>Grafisch vormgever</li>
<li>Interactief</li>
<li>Kwaliteit</li>
<li>Interactieve communicatie</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="list">
<ul>
<li>Digital awesomeness</li>
<li>Custom website</li>
<li>Gaming</li>
<li>Technologie</li>
<li>Strategie</li>
<li>Branding</li>
<li>Digitale campagnes</li>
</ul>
</div>
</div>
</div>
<div class="cursor"></div>
</div>
</section>

Answer 1

Is it something like this you want?
.list:hover {
background-color: grey;
}
.points:hover {
color: white;
}
<section class="googleBlock">
<h1 class='title'>Oh ja, en voor <strong>Google</strong>, voor als je mee leest...</h1>
<div class="test">
<div id="maskOverlay">
<div class="wrapper">
<div class="list">
<ul>
<li class="points">Website laten maken</li>
<li class="points">Online marketing bureau</li>
<li class="points">Website maker</li>
<li class="points">Website bouwen</li>
<li class="points">Webdesign</li>
<li class="points">Digital agency</li>
<li class="points">Websites</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="list">
<ul>
<li class="points">Grafisch ontwerper</li>
<li class="points">Serious Game</li>
<li class="points">Design bureau</li>
<li class="points">Grafisch vormgever</li>
<li class="points">Interactief</li>
<li class="points">Kwaliteit</li>
<li class="points">Interactieve communicatie</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="list">
<ul>
<li class="points">Digital awesomeness</li>
<li class="points">Custom website</li>
<li class="points">Gaming</li>
<li class="points">Technologie</li>
<li class="points">Strategie</li>
<li class="points">Branding</li>
<li class="points">Digitale campagnes</li>
</ul>
</div>
</div>
</div>
<div class="cursor"></div>
</div>
</section>

Answer 2

This should do the trick
.container .pageBlock .googleBlock {
width: 1100px;
margin: 0 auto;
padding: 0 30px;
max-width: 100%;
box-sizing: border-box;
cursor: url(../img/vergrootglas.png) 55 30, auto;
}
.container .pageBlock .googleBlock .title {
font-size: 14px;
font-weight: 200;
margin-left: 40px;
}
.container .pageBlock .googleBlock .test {
overflow: hidden;
position: relative;
}
.container .pageBlock .googleBlock .test .cursor {
position: absolute;
z-index: 1;
background: transparent;
width: 35px;
height: 35px;
opacity: 0.9;
border-radius: 50%;
box-shadow: 0 0 0 9999px #2D2D2D;
}
.container .pageBlock .googleBlock .test #maskOverlay {
width: 100%;
height: 100%;
}
.container .pageBlock .googleBlock .test .wrapper {
list-style: none;
display: inline-block;
width: 33%;
position: relative;
}
.container .pageBlock .googleBlock .test .wrapper .list ul {
list-style: none;
}
.container .pageBlock .googleBlock .test .wrapper .list ul > li:before {
content: "- ";
}
.container .pageBlock .googleBlock .test .wrapper .list li {
line-height: 28px;
}
.list{
transition: all 1s ease;
}
.list:hover{
box-shadow: 0 0 0 9999px #2D2D2D;
}
<section class="googleBlock">
<h1 class='title'>Oh ja, en voor <strong>Google</strong>, voor als je mee leest...</h1>
<div class="test">
<div id="maskOverlay">
<div class="wrapper">
<div class="list">
<ul>
<li>Website laten maken</li>
<li>Online marketing bureau</li>
<li>Website maker</li>
<li>Website bouwen</li>
<li>Webdesign</li>
<li>Digital agency</li>
<li>Websites</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="list">
<ul>
<li>Grafisch ontwerper</li>
<li>Serious Game</li>
<li>Design bureau</li>
<li>Grafisch vormgever</li>
<li>Interactief</li>
<li>Kwaliteit</li>
<li>Interactieve communicatie</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="list">
<ul>
<li>Digital awesomeness</li>
<li>Custom website</li>
<li>Gaming</li>
<li>Technologie</li>
<li>Strategie</li>
<li>Branding</li>
<li>Digitale campagnes</li>
</ul>
</div>
</div>
</div>
<div class="cursor"></div>
</div>
</section>
.list{
transition: all 1s ease;
}
.list:hover{
box-shadow: 0 0 0 9999px #2D2D2D;
}