Hallowiener by Bobby McKenna

code | October 27, 2013

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

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.

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.)

Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.