As a follow-up to my previous (lab) post, I created another small demo featuring css masks. The Mailbox App (which is great!) inspired me, and I've tried to create the same interface in HTML & CSS. Currently only the empty-state has been recreated but I might add the touch gestures (to archive/delete and delay messages) later on.
The first version used css :hovers to enlarge the image but that won't do the trick on a mobile device. So a little piece of Javascript takes of it now (on click, instead of on hover).
While working on the demo, I discovered that the not all of the css masks properties transition. When disabling the mask, it simply removes it instantly (I was hoping for a fade-out). Other properties couldn't help me either, so this will have to do for now.