JürgenB: Bildwechsler

Beitrag lesen

Hallo Enrico,

ich hänge gerade an dynamischen Bilderwechseln via JavaScript.

Über CSS kann ich es nicht umsetzen, weil ich sonst leere div-Elemente hätte und HTML-Elemente sollen ja nicht leer sein sollen/dürfen.

also das verstehe ich jetzt nicht. Warum darf eine DIV-Box nicht leer sein? Warum muss denn die DIV-Box leer sein?

Mein css-Bildwechsler für Mausdrüber und Mausklick sieht so aus:

.bild_bild img { position:absolute; opacity:1 }  
.bild_bild img + img { position:static; opacity:0 }  
.bild_bild:hover img { opacity:0 }  
.bild_bild:hover img + img { opacity:1 }  
.bild_bild:focus img { opacity:0 }  
.bild_bild:focus img + img { opacity:1 }  
img { transition: opacity 2s }
<figure tabindex="0" class="bild_bild">  
  <img src="Sonnenblume.jpg" alt="Sonnenblume"><img src="Sonnenblume_Mitte.jpg" alt="Sonnenblume Ausschnitt">  
  <figcaption>Sonnenblume<br><span class="kleiner">(Mouseover vergrößert die Mitte)</span></figcaption>  
</figure>

s. http://www.j-berkemeier.de/Spiralen.html

Gruß, Jürgen