In my <ul>, each <li> contains an image. I want these images to scale and become opaque upon hover. However, the issue is that when they scale, they get covered by the following image. Unsure if the z-index is correctly placed... Below is the CSS code I have:
.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;
}
Here is the corresponding 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>