Question

So, I have the same image that I need to overlap each other. The first one as you can see has an z-index:1 and the others of 0. But, as the images keep repeating I have to keep creating a new style to make the next one 115px to the right. Is there a css pseudo method to automate this or do I have to revert to using jquery or js to bump it to the right?

<style>
img.overlap{z-index:1;position:absolute;left:670px;}
img.underlap{z-index:0;position:absolute; left:785px;}
</style>

<div class="span12">
     <a href="#"><img src="img/blue_btn.png" alt="Home" class="overlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="About" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Services" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Portfolio" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Blog" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Contact" class="underlap"/></a>
</div>

UPDATE: I was cropping the image as I read this post as I knew that it would be hard to visualize. Here is the nav area. I have cropped the first one and I will repeat them and later change the alpha with jquery.

http://weslice.com/images/nav_complete.jpg

Answer 1

I think this fiddle http://jsfiddle.net/2vUzp/9/ achieves the effect without the need for classes (though it does reverse the order of the menu in the html, but not in what is displayed to the average user). After looking at your sample image, you may not want the “hover” effect in my example, but that can be removed.

CSS

.span12 {
    float: left;
}

.span12 a {
    position: relative;
    margin-right: -30px;
    display: block;
    float: right;
}

.span12 a:first-child {
    margin-right: 0;
}

.span12 a:hover {
    z-index: 1;
}

.span12 img { /*for demo*/
    display: block;
    width: 100px;
    height: 20px;
    border: 1px solid blue;
    background-color: cyan;
}

HTML

<div class="span12">
     <a href="#"><img src="img/blue_btn.png" alt="Contact"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Blog"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Portfolio"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Services"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="About" /></a>
     <a href="#"><img src="img/blue_btn.png" alt="Home" /></a>
</div>