small-step: Linkgallerie mit hover | ich dreh durch

Beitrag lesen

Hallo Tachikoma,

Nun kommt gleich der nächste Hammer an dem ich dann
letztes Mal verzweifelt bin.
Noch eine solche Reihe mit Links genau darunter??

Das ist wirklich kein Problem.

 <div id="portfolio">  
  <ul id="list1">  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Nicholas Bredel" /><br />&nbsp;<h1>Mr. Bredel aka danick</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Osthessen Gesoxx" /><br />&nbsp;<h1>Osthessen Gesoxx</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Logo & Signet Design | Illustrator"  /><br />&nbsp;<h1>Logo & Signet Design | Illustrator</h1><p>Das Logo ist das Herz der Corporate Identity und somit das wichtigste Element... sowie die Grundlage für das weitere Erscheinungsbild. Weniger ist dabei meistens mehr, deshalb aber nicht minder wertvoll.</p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br />&nbsp;<h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br />&nbsp;<h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br />&nbsp;<h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br />&nbsp;<h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br />&nbsp;<h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>  
  </ul>  
  <ul id="list2">  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Nicholas Bredel" /><br />&nbsp;<h1>Mr. Bredel aka danick</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Osthessen Gesoxx" /><br />&nbsp;<h1>Osthessen Gesoxx</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Logo & Signet Design | Illustrator"  /><br />&nbsp;<h1>Logo & Signet Design | Illustrator</h1><p>Das Logo ist das Herz der Corporate Identity und somit das wichtigste Element... sowie die Grundlage für das weitere Erscheinungsbild. Weniger ist dabei meistens mehr, deshalb aber nicht minder wertvoll.</p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br />&nbsp;<h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br />&nbsp;<h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br />&nbsp;<h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br />&nbsp;<h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>  
  <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br />&nbsp;<h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>  
  </ul>  
 </div>

ul einfach verdoppeln, jeweils eine id vergeben und ein bisschen am css rumspielen

  
ul#list2 a.gallery:hover span {  
  position:absolute;  
  top:300px;  
}  

Allerdings musst Du jetzt darauf achten, dass der Container schnell zu klein wird für den Text. Eventuell solltest Du mit overflow:auto; Scrollbalken ermöglichen.

Gruß,
small-step