Placer un libellé semi-transparent sur une image

2009-09-10 #code-snippets#html

J'avais vu ça il y a pas mal de temps, alors ce coup-ci je blogue pour essayer de ne pas oublier comment faire.

Côté Html

<div class="img-desc">
        <img src="sample.jpg" alt="" />
        <cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

Côté CSS

.img-desc {
        position: relative;
        display: block;
        height:335px;
        width: 575px;
}
.img-desc cite {
        background: #111;
        filter:alpha(opacity=55);
        opacity:.55;
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 555px;
        padding: 10px;
        border-top: 1px solid #999;
}

Sources et exemples