:hover is not working, because of background - html

Question

For a movie website I have a moving background with a grain texture to create a movie vibe.
Later in the website I want to have a :hover input, but because of the grain background it doesn't seem to work.
The background will be attached to the section and when you hover over the div with the class hover, the content from the test div need to be show up.
This is my HTML and CSS:
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section:after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
}
.test {
display: none;
color: white;
}
.hover:hover+.test {
display: block;
}
<section class="section">
<div class="hover">
</div>
<div class="test">test</div>
</section>
Here is the JSFiddle:
https://jsfiddle.net/g8dhz14j/3/
When I try the code without the .section:after, the code works. Can someone help out?

Answer 1

Add pointer-events: none; to the .section::after rules.
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section::after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
z-index: 0;
pointer-events: none;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
}
.blue {
display: none;
color: white;
}
.hover:hover+.blue {
display: block;
}
<section class="section">
<div class="hover">
</div>
<div class="blue">THIS IS A TEST</div>
</section>

Answer 2

The :after pseudo element is on top of the .hover element. You can change that by using z-index:
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section:after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 1;
}
.test {
display: none;
color: white;
}
.hover:hover + .test {
display: block;
}
<section class="section">
<div class="hover"></div>
<div class="test">THIS IS A TEST</div>
</section>