Hallowiener by Bobby McKenna

Another Dribbble shot turned code. Hover for zombification.

See the Pen Hallowiener by Bobby McKenna by Katy DeCorah (@katydecorah) on CodePen

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.

Lastly, I * 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.)