Box shadow in list of images? [Archive]

ttmt

06-06-2012, 02:52 PM

Hi all

I have a simple demo here to illustrate my problem.

http://www.ttmt.org.uk/forum/shadow/

It's a list of floated images that have white borders.

On hover the images have a box shadow.

My problem is the box shadow is above the image on the left but below the image on the right.

I want the shadow to appear on top of the images either side.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

<style type="text/css">
ul{
margin:50px;
}
ul li{
display:block;
float:left;
}
ul li a{
margin:2px;
}
ul li a img{
border: 6px solid white;
}
ul li a:hover img{
box-shadow:1px 1px 10px 10px #ccc;
-moz-box-shadow:1px 1px 10px 10px #ccc;
-webkit-box-shadow:1px 1px 10px 10px #ccc;
z-index:100;
}
</style>

</head>

<body>

<ul>
<li><a href=""><img src="images/car01.jpg" alt="" /></a></li>
<li><a href=""><img src="images/car02.jpg" alt="" /></a></li>
<li><a href=""><img src="images/car03.jpg" alt="" /></a></li>
<li><a href=""><img src="images/car04.jpg" alt="" /></a></li>
<li><a href=""><img src="images/car05.jpg" alt="" /></a></li>
<li><a href=""><img src="images/car06.jpg" alt="" /></a></li>
<li><a href=""><img src="images/car07.jpg" alt="" /></a></li>
<li><a href=""><img src="images/car08.jpg" alt="" /></a></li>
</ul>

</body>

</html>