I need to create a hover state inside a circle where a background color wipes top to bottom. I have tried a couple ways to achieve this, but I don’t want the wipe to be circular. I need it to be a straight line as it wipes through the circle. From my understanding, I can achieve this with a :before pseudo class, but I’ve had no luck making it work. As the background comes in, it completely covers the circle with a box.
What I have achieved so far is here: https://codepen.io/anon/pen/ELwWRO
Any help would be GREATLY appreciated. Thank you!