[jQuery] z-index issue

[jQuery] z-index issue


Hi,
I'm just learning jQuery and working on stuff for fun, but right now,
I am stumped! I have a hover animation happening with 4 small
images. Think of them as being in a small box with some padding to
separate each image. These images are small and absolutely positioned
so i could change the actual size. Just to make sure you know what I
mean, here is the HTML & CSS:
<style>
/* the images are actually much larger, we just want to show a snippet
*/
span.resize{
    width:100px;
    height:75px;
    overflow:hidden;
    padding:3px;
    }
span#pic1, span#pic2, span#pic3, span#pic4{
    position:absolute;
    z-index:-1;
    }
span#pic1{
    margin:0;
    }
span#pic2{
    margin:0 0 0 110px;
    }
span#pic3{
    margin:85px 0 0 0;
    }
span#pic4{
    margin:85px 0 0 110px;
    }
</style>
</head>
<body>
    <span class="resize" id="pic1"><img src="images/flower1.jpg" /></
span>
    <span class="resize" id="pic2"><img src="images/flower2.jpg" /></
span>
<span class="resize" id="pic3"><img src="images/flower2.jpg" /