One of the biggest lessons that I have learned when trying to build an interactive, animated element is that while divs are visually transparent – they are not physically.  This means that if you have the following layers:

#container
#layer1
#link1
#image1

#layer2

even though layer2 is completely transparent – it still overlaps the link making the link un-clickable.

I have been working on a two layer parallaxing effect; each layer has 3 images and 3 clickable items.  This is an example: http://www.jquery4u.com/demos/jquery4u-parallax-demo/  If you tried making the Frog clickable – the Butterfly div would block it.

As a solution – I had to move all clickable elements to a third – top most layer and match up the animation per item.

Definitely not the ideal scenario and a BIG lesson learned.

 

Edit