find-templates

Bild mit Hover Effekt

Bilder mit einfahrenden Info-Text

Zurück zur Übersicht


Bei Mauskontakt fährt halbtransparenter Info-Balken ins Bild.
Könnte z.B. als Menü dienen und mit Seiten verlinkt werden, die Ihr in der Navi versteckt.

  • Schloss in Glücksburg

  • Mühle bei Flensburg

  • Ich bei Stollberg

  • Ich bei Munkbarup



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:

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

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

img.grafik {
width:250px; height:165px; border-radius:10px; z-index:1; transition: all 0.5s ease; opacity:0.7; }

img.grafik:hover { opacity:1.0; }

p.text_unten {
width:240px; height:40px; margin-top:40px; font-size:14px; position:relative; padding:10px 10px 0px 10px; 
background-image:url(https://img.webme.com/pic/c/clean-test/halbtransparent.png); 
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 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.

Der HTML-Code:

<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;" />

Beispiel für 4 Bilder.
Wenn Ihr mehr Bilder einfügen möchtet, kopiert Euch den Bereich von <li> bis zum </li>
und fügt diesen unten - vor dem </ul> - mit ein.

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"

Wer es im Design Iceblue verwenden möchte: Der Seiteninhalt dort ist nur 530 Pixel breit.
Im CSS-Code (auf dieser Seite) müssen die Breiten bei width: angepasst werden.







Heute: 9 Besucher