Question

Based on the following tiled layout: http://jsfiddle.net/bzCbh/7/

Could anyone suggest a solution for adding a drop shadow to the unclicked element so it appears as though there’s depth under the tiles ?

Thanks

** Apologies, the solution here lay in adding a class rule containing box shadow only to the current tile layer & also: .layer .tile img { position: relative;} Position Relative stopped the box-shadow overlapping onto neighbouring elements. **

Answer 1

This can be done with CSS:

.element{
   box-shadow:0 0 10px #999;
}

.element.clicked{
   box-shadow:0 0 0 #999
}

And the JS:

$('.element').on('click', function(){
   $(this).addClass('clicked');
}

This is straight CSS3… make sure you include browser prefixes for cross-browser compatibility.