Jak umieścić półprzezroczystego diva na obrazku?

Question

Cześć, mam obrazek. Załóżmy o rozmiarach 450x300. Chcę umieścić w nim diva, gdzie będzie jakiś opis. Od dołu obrazka w górę ma iść div rozciągnięty na cały obrazek o wysokości powiedzmy 100 aby nie przykrywał połowy obrazka.

 

Jak takie coś zrobić? :o

Answer 1

figure I figcaption 

Answer 2

Coś w tym stylu powinno być:

<div>
<img src="ścieżka obrazka" alt="Opis obrazka">
<p>Tutaj opis, który ma być na obrazku</p>
</div>

DIVa dajesz na pozycję relatywną, a paragraf na pozycję absolutną. Jak chcesz uzyskać jeszcze tło to możesz nadać paragrafowi te tło lub po prostu dołożyć kolejnego DIVa w środku, a dopiero wewnątrz niego zamieszczasz np. paragraf. Oczywiście temu DIVowi (lub paragrafowi) ustalasz też współrzędne (top/bottom i left/right), żeby odpowiednio go ustawić.