Another Dribbble shot turned code. Hover for zombification.
Dribbble shot Hallowiener by Bobby McKenna.
This was also slightly inspired by Apple Mice By Josh Bader. I loved his graceful transitions between each mouse, which made the experience more of a metamorphosis.
When creating a metamorphosis, I recommend building the result or hover state first.
In this case, I started with the zombie face. Once I had the zombie face, I copied all the styles and pasted them under the hover state for the
.head element. At this point, when I hovered on the head I saw no difference, because it was a zombie face hovering to zombie face.
Next, I needed to make the normal state the normal face. To do this, I carefully adjusted the styles of the normal state. I tried to be consistent among elements with styling to make smoother transitions. If there was an element that appeared in one state, but was removed from the next, I tried to use
opacity instead of
display:none. I’ve found that opacity will usually give you a more pleasant transition.
* styled a transition to allow all the elements to glide into zombie mode when hovered. I also tried to remove redundant code from the normal and hover states where possible.
(My code could be cleaner, but I didn’t feel like being picky on a fun Pen.)