Grafik-Slider Beispiel

weiteres Grafik-Slider Beispiel

Der HTML-Code :

<div class="img-slider">
<img class="img-top" src="GRAFIKADRESSE.jpg">
<strong> Überschrift </strong>
<br>
Hier der Inhalt unter der Grafik
</div>

Der CSS-Code :

<style type="text/css">
<!--
.img-slider {
   width: 445px;
   height: 80px;
   padding:10px;
   position: relative;
   border: 1px solid #777777;
   overflow: hidden;
}

/* Position Grafik sichtbar */
.img-top {
  position: absolute;
  top: 0px; left: 0px;
  transition: all 1s linear;
  z-index:1;
}

/* Position Grafik oben */
.img-slider:hover .img-top { margin-top: -100px; }
-->
</style>

Bei .img-slider seht Ihr Breite width: und Höhe height:
Gebt hier Eure Bildgröße an, Minus 20 Pixel !

Beispiel:
Eure Grafik hat die Breite 500 Pixel. Das width: bekommt 480px;
Eure Grafik hat die Höhe 200 Pixel. Das height: bekommt 180px;
Das margin-top: bekommt -200px;

Tipp:
Das Textfeld ( im CSS-Code .img-slider ) kann z.B.
auch eine Hintergrundfarbe oder ein Hintergrundbild bekommen

- Hintergrundfarbe mit background-color: #EEEEEE;
- Hintergrundbild mit background-image: url(GRAFIKADRESSE.jpg);
- Textfarbe mit color: #000000;
- Schriftgröße mit font-size: 14px;