find-templates

image slider

hier zu Beispiel 2

Image Slider (ohne Javascript)


fahre mit der Maus über die Grafiken :



Gleiche Effekt wie beim "Banner-Slider", allerdings habe ich es hier mit CSS3 (transition) umsetzen können.
Die Browser IE6 - IE8 sehen hier keinen Slide-Effekt (keinen fliessenden Übergang) , sondern nur den Hover.
Weiteres Beispiel, z.B. für die rechte Box: http://grafik-werkstatt.de.tl/Boxentest.htm




Schritt 1: Der CSS-Code


Baukasten-Design "CSS" : Code einfügen im Feld "css ohne style tags".
Alle anderen Designs: Einfügen im Feld "Text über Design", vor dem --></style> 

/* Feld für Grafik */
ul.effekt li {
  float: left;
  width: 150px; /* hier Bildbreite */
  height: 106px; /* hier Bildhöhe */
  list-style-type: none;
  margin: 10px; /* Abstand zwischen Bilder */
  padding: 8px;
  background-color: #FFFFFF; /* Rahmenfarbe um Bilder */
  border: 1px solid #c9c9c9; 
  box-shadow: 3px 3px 7px #202020; }

/* Feld mit Text */
ul.effekt li a {
  display:block;
  width: 130px; /* hier Bildbreite Minus 20 Pixel */
  height: 86px; /* hier Bildhöhe Minus 20 Pixel */
  padding: 10px;
  color: #000000; /* Textfarbe */
  font-size: 12px; /* Schriftgröße */
  background-color: #FFFFFF;
  position: relative; 
  text-decoration: none;
  overflow: hidden; }

/* Überschriften */
ul.effekt li h4 {
  margin-bottom: 15px;
  color: #000000;
  font-size: 14px; }

/* Bild vor Hover */
ul.effekt li img {
  position: absolute;
  top: 0px; left: 0px;
  border: none; 
  transition: all 1s linear; }

/* Hover Bildposition  */
ul.effekt li:hover img {
  margin-left: 150px; } /* hier Bildbreite */

Wenn noch KEINE CSS-Codes im Feld "Text über Design" eingefügt wurden sind:
Schreibe vor dem Code <style type="text/css"><!-- und NACH dem Code --></style>




Schritt 2: HTML-Code für Seiteninhalt


- auf "Eigene Seiten editieren"
- Seite wählen, wo das "Menü" hinein soll
- im Editor oben links auf "Quellcode" klicken
- und diesen HTML-Code in die Seite einfügen

<ul class="effekt">

<li><a href="LINk"><img alt="" src="Grafikadresse 1" /><h4>Titel</h4> Hier Infotext</a></li>

<li><a href="LINk"><img alt="" src="Grafikadresse 2" /><h4>Titel</h4> Hier Infotext</a></li>

<li><a href="LINk"><img alt="" src="Grafikadresse 3" /><h4>Titel</h4> Hier Infotext</a></li>

<li><a href="LINk"><img alt="" src="Grafikadresse 4" /><h4>Titel</h4> Hier Infotext</a></li>

<li><a href="LINk"><img alt="" src="Grafikadresse 5" /><h4>Titel</h4> Hier Infotext</a></li>

<li><a href="LINk"><img alt="" src="Grafikadresse 6" /><h4>Titel</h4> Hier Infotext</a></li>

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



Die Richtung beim Hover ändern :


• Grafik kann bei Mauskontakt auch nach oben fahren
• siehe im CSS-Code letzte Codezeile margin-left: 150px;
• ändere es um in margin-top: -150px; (die Bildhöhe mit Minuszahl)


• Grafik nach unten fahren :
• ändere letzte Codezeile im CSS-Code um in margin-top: 106px; (die Bildhöhe angeben)





Heute: 5 Besucher