Wie wird so etwas umgesetzt?

[Matthias Scharwies]

Moin,

hab mal wieder ein kleine Frage, mir gefällt die Bilder Animation sehr gut (wenn man mit der Maus über ein Bild fährt)

http://tdaboulder.com/leadership

Wie könnte ich so etwas umsetzten?

  
<li class=" " style="display: block;">  
    <div class="wrapper" style="height: 150px; display: block;"></div>  
    <div class="content" style="opacity: 1; display: block;"></div>  
</li>

hier wird mit inline-Styles gearbeitet, -> nicht so schön!

Du könntest das HTML so machen:

  
<figure>  
   <img ...>  
   <figcaption> .... </figcaption>  
</figure>  

und dann das css so:

  
figure {height:200px;}  
img {height:150px;}  
figcaption {height:50px;}  
  
figure:hover img {height:200px;}  
figure:hover figcaption {height:0;}  

Alternativ arbeitest Du wie im Beispiel mit opacity
Noch transition einfügen für einen sanften Übergang.

LG Matthias