After experimenting with SVG and CSS effects, I'm trying to achieve a similar style to the game "limbo".
The grain and tiltshift effects are working as intended, but I'm having trouble triggering the hover behavior on SVG elements. What could be causing this issue?
When using the Firefox inspector, I can trigger the hover effect by selecting the element directly. This leads me to believe that the pseudo-elements might be interfering with the hover functionality on SVG elements.
.grain {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
background-position: center
}
.grain:after {
content: "";
background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png");
height: 300%;
width: 300%;
position: fixed;
opacity: 0.1;
animation: animateGrain 8s steps(10) infinite;
}
@keyframes animateGrain {
0%,
100% {
transform: translate(0, 0)
}
...(remaining CSS code)...
<div class="tiltshift">
<div class="grain">
<svg>...</svg>
</div>
</div>