CSS Help - div over image

Question

I\'m making a small site for my college project, most of it is complete but I\'m stuck on how I should go about adding a feature.

If you go onto a site like http://w

Answer 1

Rhino's idea is a good one but you'll want to set footerbar's positioon to static so it stays inside the div.image

.image {
    width: 200px;
    height: 150px;
    background-image: url("/images/whatever.jpg");
    position:inline-block;
    border:1px solid green;
}
.footerBar {
    position: static;
    bottom: 0px;
    width: 100%;
    overflow: none;
}

<div class="image">
    <div class="footerBar">[content]</div>
</div>

Otherwise you'd have to use javascript to find the position of the image relative to the page and absolute position the text where you wanted it with a higher z-index.

Answer 2

How about having a master <div> with a background image?

<div class="image" style="background-image: ('/images/whatever.jpg');">
    <div class="footerBar">[content]</div>
</div>

And style them with CSS, or use JavaScript to set the images.

.image {
    width: 200px;
    height: 150px;
    position: relative;
}
.footerBar {
    background-color: lightGrey;
    position: absolute;
    bottom: 0px;
    width: 100%;
    overflow: none;
    display: none;
}
.image:hover .footerBar {
    display: block;
}

See example on jsFiddle

Answer 3

Try setting position: absolute on the div you want to position over the image.