Illustrations created from vanilla html and css with no additional frameworks.
The purpose was to learn how to construct and organize different body parts in layers, similar to how image editors are laid out.
One of the issues I keep coming across is to figure out how to remove the excess pupils outside of the eyes without adding too many elements to hide them.
I’m thinking of using the overlay: hidden; but when applied to the first eye (the whites, and the eye class) it disappears and the one with the :before pseudocode actually displays what I intended.
The second thing i want to add is the ability for the pupils to animate by following the mouse only within the eyes class container. I’m planning on using javascript with that.
Mission accomplished!
Bonus Surprise: View the image in Chrome and Safari