Ganane: Bild mit einem transparenten Bereich auf dem Bild beschreiben

Beitrag lesen

SELF-Forum

Bild mit einem transparenten Bereich auf dem Bild beschreiben

Ganane
– Informationen zu den Bewertungsregeln

Hallo Selfler!

Ich möchte vielen Bildern (mit einer festen Größe) auf meiner Website einen unteren Balken (halbtransparent über dem Bild) hinzufügen, auf dem Informationen wie z.B. die Auflösung und die Dateigröße stehen.

Ich hab mal ein Bild erstellt, was zeigt, wie das ganze nachher aussehen soll (hier ein bisschen übertrieben groß):
Balkenbeispiel

Momentan löse ich das, indem ich das Bild in ein <div> packe und zusätzlich ein <div>, was die Beschreibung enthält, in dieses <div> packe. Das sieht dann also so aus:

  
<div class="container">  
   <img src="http://www.example.org/image.jpg" alt="">  
   <div class="beschreibung">Beschreibungstext...</div>  
</div>

Das CSS sieht dann ungefähr so aus:

  
.container  
{  
   position: relative;  
   border: 1px solid black;  
   width: 400px;  
}  
  
.container img  
{  
   width: 400px;  
}  
  
.container .beschreibung  
{  
   position: absolute;  
   /* opacity für alle browser: 0.7 */  
   width: 400px;  
   bottom: 0px;  
}

Allerdings wäre es imho besser (semantischer), wenn ich nur das Bild und den Beschreibungstext habe, nicht noch einen zusätzlichen Container außenrum. Bei vielen Bildern also statt

  
<!-- Bild 1 -->  
<div class="container">  
   <img src="http://www.example.org/image.jpg" alt="">  
   <div class="beschreibung">Beschreibungstext...</div>  
</div>  
  
<!-- Bild 2 -->  
<div class="container">  
   <img src="http://www.example.org/image.jpg" alt="">  
   <div class="beschreibung">Beschreibungstext...</div>  
</div>  
  
<!-- Bild 3 -->  
<div class="container">  
   <img src="http://www.example.org/image.jpg" alt="">  
   <div class="beschreibung">Beschreibungstext...</div>  
</div>  
  
<!-- Bild ... -->

lieber soetwas:

  
<!-- Bild 1 -->  
<img src="http://www.example.org/image.jpg" alt="">  
<div class="beschreibung">Beschreibungstext...</div>  
  
<!-- Bild 2 -->  
<img src="http://www.example.org/image.jpg" alt="">  
<div class="beschreibung">Beschreibungstext...</div>  
  
<!-- Bild 3 -->  
<img src="http://www.example.org/image.jpg" alt="">  
<div class="beschreibung">Beschreibungstext...</div>  
  
<!-- Bild ... -->

Wie kann ich das hinbekommen, sodass der Balken immer pixelgenau auf der Unterseite des Bildes ist (wie in den verlinkten Bild) und ich dann eine Art mehrzeile Gallerie daraus machen kann? Die Bilder haben immer eine feste Größe von 400px (oder auch weniger oder mehr, aber alle sind immer gleich groß).
Hat jemand eine Idee, wie ich da herangehen könnte oder geht das gar nicht?

Gruß,
Ganane

Beitrag melden
–
Informationen zu den Bewertungsregeln