Mouse Over Effekt über Img

[Gunnar Bittersmann]

@@norah:

nuqneH

Ich habe die Referenzbilder wie folgt eingebunden:

<div id="referenzen">
<a href="#"><img src="web/images/bild_1.JPG" alt="bild1" name="bild1"/></a>
<a href="#"><img src="web/images/bild_1.JPG" alt="bild2" name="bild2"/></a>
<a href="#"><img src="web/images/bild_1.JPG" alt="bild3" name="bild3"/></a>
</div>

Die Werte der @name-Attribute sollen die anzuzeigenden Namen der Projekte sein? Das wird wohl nichts. Du brauchst den Neman als Inhalt eines Elements. AFAIS dürfen 'img'-Elemente auch in HTML5 keine @name-Attribute mehr haben.

Außerdem: Eine Liste ist eine Liste ist eine Liste! Eine sinnvolle Auszeichnung wäre:

<ul id="referenzen">  
  <li>  
    <a href="projekt1">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 1</figcaption>  
      </figure>  
    </a>  
  </li>  
  <li>  
    ⋮  
  </li>  
</ul>

Im Stylesheet sorgst du dafür, dass 'figcaption' initial nicht zu sehen ist, sondern erst, wenn man über das Bild hovert:

#referenzen  
{  
	list-style: none;  
	overflow: hidden;  
}  
  
#referenzen li  
{  
	float: left;  
}  
  
#referenzen figure  
{  
	margin: 0;  
	overflow: hidden;  
	position: relative;  
}  
  
#referenzen a, #referenzen img  
{  
	color: black;  
	display: block;  
}  
  
#referenzen figcaption  
{  
	background: rgba(255, 255, 255, 0.5);  
	left: -10000px;  
	padding: 1em;  
	position: absolute;  
	top: 0;  
	width: 100%;  
}  
  
#referenzen a:hover figcaption  
{  
	left: 0;  
}

Qapla'