View Full Version : Box shadow in list of images?

06-06-2012, 02:52 PM
Hi all

I have a simple demo here to illustrate my problem.


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>
<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 li{
ul li a{
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;



<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>



06-06-2012, 03:25 PM
You can't apply z-index on an element without a relative or absolute position applied to it. Set position: relative; to ul li a img

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum