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.

Step 1

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.

Step 2

Then, using Javascript, all we had to do was to change the background of the hidden div to whatever the user was hovering over and change the background position to follow the cursor.

Step 3
Step 4

One issue we came across was when hovering near the corners of images, the corners were visible in the logo. Not nice!

To fix this we used a bit of maths in the Javascript to implement a “safe-zone” on the image.

Step 5

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…