SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Box shadow in list of images?

    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.


    Code:
    <!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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try this:

    Code:
    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;
      position: relative;
      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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •