nicht angemeldet
Hallo Matthias,
Du könntest das HTML so machen:
<figure>
<img ...>
<figcaption> .... </figcaption>
</figure>
>
> und dann das css so:
> ~~~css
> figure {height:200px;}
> img {height:150px;}
> figcaption {height:50px;}
>
> figure:hover img {height:200px;}
> figure:hover figcaption {height:0;}
>
hab ich mal getestet. Mein Code sieht so aus
<body>
<h1>Bilder Seite</h1>
<figure>
<img src="Thomas_Website.jpg" alt="Test Bild">
<figcaption>Sturmverliebt<br>Ich bin ein Test</figcaption>
</figure>
</body>
</html>
<style>
figure {height:200px;}
img {height:150px;}
figcaption {height:50px;}
figure:hover img {height:200px;}
figure:hover figcaption {height:0;}
</style>
Die Ausgabe sieht dann so aus
http://www.bilder-upload.eu/upload/ddb0ee-1408043012.png
Wenn ich mit der Maus drüber fahre wird das Bild nur etwas breiter und der Text bleibt stehen, das Bild geht nicht über den Text.
Matthias Scharwies
Gunnar Bittersmann