Design Clean
    >> Tipps zum anpassen

Bilder mit Hover

Infotext bei Mauskontakt


Bei Mauskontakt fährt halbtransparenter Info-Balken ins Bild.
Grafiken könnten z.B.für Kategorien verwenden werden, die auf Seiten verlinkt werden.

>> Die Seiten - die Ihr mit den Bildern verlinkt - könnt Ihr in der Navigation verstecken.

  • 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:

Der CSS-Code :
<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.

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.





Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :4 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben