CODEWITHSUNDEEP
css
kirtan403
kirtan403

Reputation: 7411

Image and description inside DIV

I'm trying to put an image and its description at the bottom of the image (and over the image with the opacity 0.8). Both the elements are inside a div element. But enable display the title. 

.title {
    opacity:0.8;
    background-color:black;
    color:white;
    height:40px;
    width:100%;
    position:relative;
    bottom:0px;
    z-index:2;
    clear:both;
}

.tilebg {
    position:relative;
    top:0px;
    height:100%;
    z-index:0;
    opacity:1;
}

I've made a fiddle with example

Upvotes: 3

Views: 2212

Answers (2)

Sampson
Sampson

Reputation: 268344

I would encourage you to use the new figure and figcaption elements since they were created for this very purpose:

<figure>
    <img src="http://placekitten.com/300/200" />
    <figcaption>This is the caption.</figcaption>
</figure>

​With the following CSS:

figure {
    width: 300px; height: 200px;
    position: relative;  /* Permits placement figcaption absolutely */
}

figcaption {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: rgba(0,0,0,.8); /* Semi-transparent background */
}

Demo: http://jsfiddle.net/qu4a3/1/

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Here's how positioning works:

position:relative - this sets the current element as the origin point (0,0)

position:absolute - this sets the position of an element in respect to its origin. If the parent has position:relative, that becomes the origin. Otherwise, it goes up the HTML tree until it finds one, defaulting to BODY if none is defined.

So: parent = relative, child = absolute

.item {
    opacity:1;
    background-color:grey;
    margin:20px;
    margin-left:20px;
    width:200px;
    height:200px;
    position:relative;
    background-image:url(http://i.imgur.com/vdDQgb.jpg);
}

.title {
    opacity:0.8;
    background-color:black;
    color:white;
    height:40px;
    width:100%;
    position:absolute;
    bottom:0px;
    z-index:2;
    clear:both;
    font-size:12px;
}

Upvotes: 2

Related Questions