Need help with creating dynamic shadows on divs. Here is what I have so far:
HTML
<div id="wrapper">
<div id="div1" class="castsshadow">Div 1</div>
<div id="div2" class="castsshadow">Div 2</div>
<div id="div3" class="castsshadow">Div 3</div>
<div id="div4" class="castsshadow">Div 4</div>
<div id="div5" class="castsshadow">Div 5</div>
</div>
CSS
#wrapper
{
width: 960px;
margin: 10px auto;
outline: 1px solid black;
padding: 5px;
}
.castsshadow
{
position: relative;
display: inline-block;
border: 1px solid #50535C;
background-color: white;
width: 300px;
height: 100px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
overflow: hidden;
padding: 10px;
}
Javascript/JQuery
$(document).ready(function(){
$(document).mousemove(function(e){
$(".castsshadow").each(function(i) {
var offset = $(this).offset();
var width = $(this).width();
var height = $(this).height();
$(this).html(
"X Axis : " + e.pageX
+ " Y Axis : " + e.pageY + "<br>"
+ "X Offset : " + offset.left
+ " Y Offset : " + offset.top + "<br>"
+ "Height : " + height
+ " Width : " + width + "<br>"
+ "X Center : " + (offset.left + (width/2))
+ " Y Center : " + (offset.top + (height/2))
);
$(this).css({
boxShadow: -(e.pageX-(offset.left+(width/2)))/10 + "px " + (-(e.pageY-(offset.top+(height/2)))/10) + "px 10px -10px #404040"
});
});
});
});
Fiddle here: http://jsfiddle.net/feY6C/
Looking for a solution to prevent the shadows from overlapping other divs. Any suggestions?