Pure CSS Linear Gradient Mask Animation on HTML Elements

I debated a bit on whether or not this even needed to be written up.

Anyway, gist is that I wanted to do a linear gradient reveal over a complex background without Javascript.. and I couldn't find any techniques that worked.

At first, I tried something that didn't work as expected, then found out through a bunch of S/O threads that it also failed for others. The threads I read didn't have solutions to the problem.

I ended up getting it to work this way (in the article), so I decided to write about it on the internet in case anyone else runs into the same problem.

Hopefully it helps people that are running into this issue; if not, carry on.