Our resident photography genius, Rob, recently launched his new website: panodrop.com, showcasing his talent for Stereographic photography.
By the end of the first day it had received over 6,000 hits and the logo masking was the hottest web design topic on Reddit. So with all the interest, we thought we’d share, roughly, how we did it.
We started with the basic mask, a cut out of the logo placed on top of an image of pure white using CSS. Together these created the part of logo that changes.
That was our default view. Then we inserted a hidden div between the mask and the white background, which would act as a placeholder for the dynamic background.
One issue we came across was when hovering near the corners of images, the corners were visible in the logo. Not nice!
Simple as that! We’re really pleased with it and Rob is pleased with the conversation it’s sparked online. Hopefully it will help him sell some prints…