Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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