Box shadow in list of images?

HTML & CSS
1

Box shadow in list of images?

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

Try this:


ul li a:hover img{
  -moz-box-shadow:1px 1px 10px 10px #ccc;
  -webkit-box-shadow:1px 1px 10px 10px #ccc;
  box-shadow:1px 1px 10px 10px #ccc;
  [COLOR="#0000CD"]position: relative;[/COLOR]
  z-index:100;
}

I’ve added position: relative. (You need a position set to make z-index work.)

Also note the reordering of the box-shadow rules. The real version (without vendor prefix) should always come last in the order.