Bildwechsler

[JürgenB]

Hallo Matthias,

Folgende klugscheißerische Verbesserungsvorschläge habe ich:

ich hab's befürchtet ...

<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: ")"; }

  
ohne Worte  
  

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

<figure tabindex="0" class="bild_bild">  

>   <img src="Sonnenblume.jpg" alt="Sonnenblume"><img src="Sonnenblume_Mitte.jpg" alt="Sonnenblume Ausschnitt">  
> </figure>

<figure tabindex="0" class="bild_bild">

<div><img src="Sonnenblume.jpg" alt="Sonnenblume"></div>
</figure>

> ~~~css

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;  
> }

interessante Variante. Leider reagiert left/top nicht auf die transition, aber mit margin-left/margin-top gehs.

Gruß, Jürgen