CSS-Tricks: Multiple Remote Linking #2

<div id="page-wrap">
<h1>Remote Linking</h1>
<div class="artwork">
    <a id="art1" href="#art1">
       <span class="name">Bild Nummer 1</span>
 
          Die Motive sind an die ägyptische Mythologie
          angelehnt und zeigen die Wüstenlandschaft
          in der Nähe von Gizeh (Spachtelmasse und
          Acrylfarbe auf Holzplatte).
       <span class="photo">
          <img src="images/art-1.jpg" alt="Art 1" />
       </span>
    </a>
 
    <a id="art2" href="#art2">
       <span class="name">Bild Nummer 2</span>
 
          Die ehemalige Raumstation Mir wurde von mir
          im Jahre 2006 mit Acrylfarbe und Grobspachtel
          auf Keilrahmen erstellt.
       <span class="photo">
          <img src="images/art-2.jpg" alt="Art 2" />
       </span>
    </a>
 
    <a id="art3" href="#art3">
       <span class="name">Bild Nummer 3</span>
 
          Die abstrakte Darstellung eines Pharaos vor
          dem Hintergrund einer Überschwemmung im
          Heiligen Land (Mischtechnik auf Keilrahmen).
       <span class="photo">
          <img src="images/art-3.jpg" alt="Art 3" />
       </span>
    </a>
 
    <a id="art4" href="#art4">
       <span class="name">Bild Nummer 4</span>
 
          Der Blick vom Balkon meiner Wohnung auf den
          Nachbar-Wohnblock (Aquarell mit Ölkreide
          auf Karton).
       <span class="photo">
          <img src="images/art-4.jpg" alt="Art 4" />
       </span>
    </a></div>
</div>

* { margin: 0; padding: 0; }
 
body {
font: 12px Helvetica, Sans-Serif;
}
 
#page-wrap {
width: 600px;
margin: 50px auto;
}
 
h1 {
font-size: 30px;
letter-spacing: -1px;
margin: 0 0 20px 0;
}
 
.artwork { position: relative; }
 
a { text-decoration: none;
color: #222;
display: block;
margin: 0 0 0 270px;
outline: none;
padding: 5px;
}
 
a img { border: 1px solid #ccc;
display: block; position: absolute;
}
 
a:hover { background: #ffefcd; }
a .name { font: 18px Georgia, Serif; }
a:hover .name{
color: #900;
font-weight: bold;
}
 
a:hover img {
border: 5px solid #222;
margin: -4px;
}
 
a .photo	{
display: block;
position: absolute;
width: 125px;
height: 125px;
}
 
#art1 .photo  { top: 0; left: 0; }
#art2 .photo  { top: 0; left: 134px; }
#art3 .photo  { top: 134px; left: 0; }
#art4 .photo  { top: 134px; left: 134px; }