Hello … I thought it would be nice for my project, but now I can’t click on links and the hover effects don’t work.
I took this from here and just used my own body code (what exactly this is: body {
Background image: URL (“https://files.catbox.moe/z8v9qh.png”);
Background size: cover;
})
This is what I stuck in my CSS:
.bg {
Position: Absolutely;
Top: 0;
Left: 0;
Right: 0;
Under: 0;
Landing: Hidden;
}
.bg: after {
Animation: grain 8s steps (10) infinite;
Background image: URL (‘https://grainy-gradients.vercel.app/noise.svg’);
contents: “”;
Height: 300%;
Width: 300%;
Left: -100%;
Top: -110%;
Coverage: 0.8;
Position: fixed;
}
u/keyframes grain {
0%, 100% {Transform: Translate (0, 0); }
10%{transform: translate (-5%, -10%); }
20%{transform: translate (-15%, 5%); }
30%{Transform: Translate (5%, -25%); }
40%{transform: translate (-5%, 25%); }
50%{Transform: Translate (-15%, 10%); }
60%{Transform: Translate (15%, 0%); }
70%{Transform: Translate (0%, 15%); }
80%{transform: translate (5%, 35%); }
90%{Transform: Translate (-10%, 10%); }
Sorry if this is not the right place for this! I am open to alternative ideas, but I know that my front-end skills are still quite low. I have tried pointer events and Z-index, but I must not have used them correctly lol
Submitted by /U /Trazia
[visit reddit] [comments]
#put #SVG #overlay #site #click #lol