Не нужен здесь никакой z-index.
<style type="text/css">
img {
border: 0;
margin: 0;
}
.banners {
overflow: hidden;
}
.banner:link, .banner:visited, .mask {
display: block;
width: 125px;
height: 125px;
}
.banner:link, .banner:visited {
position: relative;
float: left;
text-decoration: none;
}
.mask {
position: absolute;
top: 0;
left: 0;
background: url(http://tri4.ax3.net/akado_ural/images/sqban_mask.png) no-repeat;
}
.b2 .mask {
background-position: 100% 0;
}
</style>
<div class="banners">
<a class="banner b1" href="#b1">
<img src="http://tri4.ax3.net/akado_ural/images/sqban3.png" alt="" width="125" height="125" />
<span class="mask"> </span>
</a>
<a class="banner b2" href="#b2">
<img src="http://tri4.ax3.net/akado_ural/images/sqban4.png" alt="" width="125" height="125" />
<span class="mask"> </span>
</a>
</div>