Hover on text link changes z-index of an image

I have a list of projects as regular text links and a group of images wildy and offset stacked on top of each other, they should overlap a bit but not completely cover each other. They are either placed in a fixed spot or randomly placed on each load, whatever is easier. Each text link should be "connected" (not linked!) to one of these images. When you hover over one of the text links the "connected" image should pop to the front.

I tried out a few tutorials and looked through a few dozen examples and actually managed to get the basic code to work, but now my images are all exactly on top of each other while I want them to be shifted a bit.

I have no idea how to fix this although I'm pretty sure it's quite easy to fix. :(

Here's my HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
<link rel="stylesheet" href="stylesheet2.css">
<title>TEST</title>
  </head>
  <body>

<div id="switcher-wrapper">

<ul>

    <li><a id="eins" href="#"><span>projekt 1</span></a></li>
    <li><a id="zwei" href="#"><span>projekt 2</span></a></li>
    <li><a id="drei" href="#"><span>projekt 3</span></a></li>

</ul>

</div>

  </body>
</html>

Here's my CSS:

#switcher-wrapper {
    width:1000px;
    height:600px;
    margin:20px 20px;
    border:1px solid black;
    position:relative;
}
#switcher-wrapper a {
    display:block;
    width:250px;
    height:250px;
    position:absolute;
    top:0;
    left:0;
}
#eins {
    background:url(01.jpg);
    top:300px;
}
#zwei { 
    background:url(03.jpg);
}
#drei { 
    background:url(04.jpg);

}
#switcher-wrapper a span {
    position:absolute;
}
#eins span {
    left:0;
    bottom:-135px; 
}
#zwei span {
    left:0;
    bottom:-155px; 
}
#drei span {
    left:0;
    bottom:-175px; 
}
#switcher-wrapper a:hover {
    z-index:1;
}

Here's my code on jsfiddle: http://jsfiddle.net/5gcwofmk/

Solution

I can see in your code you are trying to alter the top of #eins element after you declared the rules for #switcher-wrapper a. You need to adhere to the scope/precedence you've created with your rules. You can read about specificity in this article.

Because #eins is an a tag; #switcher-wrapper a actually takes precedence over #eins even if #eins is declared after #switcher-wrapper a.

You can correct this by add a tags before your ids like so:

a#eins {
  /* rules */
}

Take a look at this fiddle. I've 'shifted' the images a bit, but unsure how you wanted them to look so it's just random.

#switcher-wrapper {
    width:1000px;
    height:600px;
    margin:20px 20px;
    border:1px solid black;
    position:relative;
}
#switcher-wrapper a {
    display:block;
    width:250px;
    height:250px;
    position:absolute;
    top:0;
    left:0;
}
a#eins {
    background:url(http://i.imgur.com/qBuL8TO.jpg);
    left: 40px;
    top: 20px;
}
a#zwei { 
    background:url(http://i.imgur.com/ddZrGHK.jpg);
    left: 20px;
    top: 20px;
}
a#drei { 
    background:url(http://i.imgur.com/39TnFyv.jpg);
}
#switcher-wrapper a span {
    position:absolute;
}
#eins span {
    left:0;
    bottom:-135px; 
}
#zwei span {
    left:0;
    bottom:-155px; 
}
#drei span {
    left:0;
    bottom:-175px; 
}
#switcher-wrapper a:hover {
    z-index:1;
}

    <title>TEST</title>
  </head>
  <body>

<div id="switcher-wrapper">

<ul>

	<li><a id="eins" href="#"><span>projekt 1</span></a></li>
	<li><a id="zwei" href="#"><span>projekt 2</span></a></li>
	<li><a id="drei" href="#"><span>projekt 3</span></a></li>

</ul>

</div>

  </body>
</html>