Bilder mit Hover

Infotext bei Mauskontakt

• 

  Schloss in Glücksburg

• 

  Mühle bei Flensburg

• 

  Ich bei Stollberg

• 

  Schwertransport bei Niebüll

Im Seiteninhalt einfügen:

• in Homepage einloggen
• auf "Seiten" klicken
• Seite wählen, wo Inhalt hinein soll
• im Editor oben links auf "Quellcode"
• nun beide Codes einfügen:

<style tpe="text/css">
<!--
ul.bilderliste { margin:0px; padding:0px; list-style-tpe:none; }

ul.bilderliste li { 
width:270px; height:175px; float:left; margin:15px; transition: all 0.5s ease; overflow:hidden; }

img.grafik {
width:270px; height:175px; border-radius:10px; z-index:1; transition: all 0.5s ease; opacity:1.0; }

img.grafik:hover { opacity:0.7; }

p.text_unten {
width:240px; height:40px; margin-top:40px; font-size:14px; position:relative; padding:10px 10px 0px 10px; 
background-color:#343434; opacity:0.8; 
color:#FFFFFF; z-index:2; border-top:2px solid #ccc; border-bottom:2px solid #ccc; }

ul.bilderliste li:hover p.text_unten { margin-top:-80px; }
-->
</style>

Die Transparenz der Bilder könnt Ihr bei opacity: anpassen. 50% Transparenz wäre 0.5 und keine 1.0
Die Feld und Bildbreite bei width: 270px; und die Höhe bei height: 175px;
Wie weit der Textbalken hinein fährt, könnt Ihr mit dem Wert bei margin-top:-80px; bestimmen.

<ul class="bilderliste">
<li>
<a href="/Seite.htm"><img class="grafik" src="Grafikadresse" alt="Bildtitel" /></a>
<p class="text_unten">Hier Text im Balken</p>
</li>

<li>
<a href="/Seite.htm"><img class="grafik" src="Grafikadresse" alt="Bildtitel" /></a>
<p class="text_unten">Hier Text im Balken</p>
</li>

<li>
<a href="/Seite.htm"><img class="grafik" src="Grafikadresse" alt="Bildtitel" /></a>
<p class="text_unten">Hier Text im Balken</p>
</li>

<li>
<a href="/Seite.htm"><img class="grafik" src="Grafikadresse" alt="Bildtitel" /></a>
<p class="text_unten">Hier Text im Balken</p>
</li>

</ul>
<br style="clear: left;" />

Wo finde ich die Grafikadressen ?

• Einloggen in Homepage
• auf "Bilder" gehen
• die Bilder hochladen
• gewünschtes Bild anklicken
• Bild wird vergrößert angezeigt
• mit Rechtsklick "Grafikadresse kopieren"