How to change z-index on li hover?

Question

I have a <ul> containing <li> that have images in them. I want to have each image scale to a larger size on hover, as well as become opaque. However, on hover the image is covered by the next image when it becomes larger. I'm not sure if I'm putting the z-index in the correct places... Here's the css code that I have thus far:

.artgallery {
    background-color:rgba(255,255,255,0.8);
    color:#fff;
    width:100%;
    padding:0px;
    margin:0;
    height:80%;
    overflow:auto;
    position:absolute;
    top:10%;
}

.artgallery ul {
    list-style: none;
    position:relative;
    text-align: center;
    width: 100%;
    padding-top:5px;
}

.artgallery li {
    position:relative;
    display: inline-block;
    vertical-align: top;
    width:19%;
    opacity:.7;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    z-index:0;
}

.artgallery li:hover {
    opacity:1;
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    z-index:100;
}

.artgallery img {
    height: 100px;
    width:100%;
}

.artgallery a {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

and here is the html:

<div class="artgallery">        
    <img src="images/art.png" style="width:66px;height:66px;position:absolute;top:2px;left:5px;z-index:2;">
    <ul>
        <li><a href="art/22.jpg" data-lightbox="art" title=" "><img src="art/22_thumb.jpg"></a> </li>
        <li><a href="art/21.jpg" data-lightbox="art" title=" "><img src="art/21_thumb.jpg"></a></li>
        <li><a href="art/20.jpg" data-lightbox="art" title=" "><img src="art/20_thumb.jpg"></a></li>
        <li><a href="art/19.jpg" data-lightbox="art" title=" "><img src="art/19_thumb.jpg"></a>   </li>
        <li><a href="art/18.jpg" data-lightbox="art" title=" "><img src="art/18_thumb.jpg"></a></li>
        <li><a href="art/17.jpg" data-lightbox="art" title=" "><img src="art/17_thumb.jpg"></a></li>
        <li><a href="art/16.jpg" data-lightbox="art" title="WIP"><img src="art/16_thumb.jpg"></a></li>
        <li><a href="art/15.jpg" data-lightbox="art" title=" "><img src="art/15_thumb.jpg"></a></li>
        <li><a href="art/14.jpg" data-lightbox="art" title=" "><img src="art/14_thumb.jpg"></a></li>
        <li><a href="art/13.jpg" data-lightbox="art" title=" "><img src="art/13_thumb.jpg"></a></li>
        <li><a href="art/12.jpg" data-lightbox="art" title="WIP"><img src="art/12_thumb.jpg"></a></li>
        <li><a href="art/11.jpg" data-lightbox="art" title=" "><img src="art/11_thumb.jpg"></a></li>
        <li><a href="art/10.jpg" data-lightbox="art" title="WIP"><img src="art/10_thumb.jpg"></a></li>
        <li><a href="art/9.jpg" data-lightbox="art" title=" "><img src="art/9_thumb.jpg"></a></li>
        <li><a href="art/8.jpg" data-lightbox="art" title=" "><img src="art/8_thumb.jpg"></a></li>
        <li><a href="art/7.jpg" data-lightbox="art" title=" "><img src="art/7_thumb.jpg"></a></li>
        <li><a href="art/6.jpg" data-lightbox="art" title=" "><img src="art/6_thumb.jpg"></a></li>
        <li><a href="art/5.jpg" data-lightbox="art" title=" "><img src="art/5_thumb.jpg"></a></li>
        <li><a href="art/4.jpg" data-lightbox="art" title=" "><img src="art/4_thumb.jpg"></a></li>
        <li><a href="art/3.jpg" data-lightbox="art" title=" "><img src="art/3_thumb.jpg"></a></li>
        <li><a href="art/2.jpg" data-lightbox="art" title="paint doodles"><img src="art/2_thumb.jpg"></a></li>
        <li><a href="art/1.jpg" data-lightbox="art" title="circa 2007"><img src="art/1_thumb.jpg"></a></li>
    </ul>
</div>

Answer 1

That CSS is ok, by the way you don't need to repeat transform properties on :hover pseudo-class :

.artgallery li:hover{
    opacity:1;        
    z-index:100;
}

You can also try to put on the hover element img a higher z-index (better safe than sorry) :

.artgallery li:hover img{
    position: relative;        
    z-index:200;
}