Menu
Hey guys…
Here’s the trouble I’m having…
I have a thumbnail gallery of 9 thumbnails, but the client wants each of the thumbnails to have rounded corners.
I was thinking that I could create a photoshop PNG image with each of the thumbnail rounded windows punched out (transparent) and set the z-index of this DIV to be on TOP of all the actual images. That way the corners would all appear to be rounded because of the overlay. Unfortunately this is not working at all….its like the overlay doesn’t even exist.
Any ideas about how this can be done another way? Maybe I’m just confused about how the z-index should be working??
Thanks so much for taking a look at this…
HTML:
<div id=”thumbnail_container”>
<img src=”thumbnail_background.png” width=”450px” height=”396px” />
<div class=”thumbnails”><img src=”images/plane_thumb.jpg” height=”140px” width=”140px” /></div>
</div>
CSS:
#thumbnail_container{width: 450px; height: 396px; float: left; margin-left: 25px; z-index: 10}
.thumbnails {width: 140px; height: 140px; float: left; padding: 10px; z-index: -10}
I attached a file of what the client wants the gallery to look like. The blue squares are where the thumbnail images would go…
[upl-file uuid=ebee76f3-3ef4-4c6e-8d7e-0d39e85b0fc2 size=48kB]thumb_gallery.jpg