Bildwechsler

[Matthias Apsel]

Om nah hoo pez nyeetz, JürgenB!

Folgende klugscheißerische Verbesserungsvorschläge habe ich:

<figcaption>Sonnenblume<br><span class="kleiner">(Mouseover vergrößert die Mitte)</span>
</figcaption>

~~~html
<figcaption>Sonnenblume<small>Mouseover vergrößert die Mitte</small>  
</figcaption>

figure small { display: block; }  
figure small::before { content: "("; }  
figure small::after { content: ")"; }

Sowie noch folgende alternative Idee, die ein Bild einspart und wegen des Zoom-Effekts bestimmt auch noch schick aussieht.

<figure tabindex="0" class="bild_bild">
  <img src="Sonnenblume.jpg" alt="Sonnenblume"><img src="Sonnenblume_Mitte.jpg" alt="Sonnenblume Ausschnitt">
</figure>

  
~~~html
<figure tabindex="0" class="bild_bild">  
  <div><img src="Sonnenblume.jpg" alt="Sonnenblume"></div>  
</figure>

figure div {  
  position: relative;  
  height: 250px;  
  width: 250px;  
  overflow: hidden;  
}  
figure img {  
  position: absolute;  
  overflow: hidden;  
  height: 250px;  
  width: 250px;  
  transition: all ease 2s;  
}  
figure:hover img {  
  height: 750px;  
  width: 750px;  
  left: -250px;  
  top: -250px;  
}

Matthias