htmlcssimagecaptions

CSS to get multiple text boxes over image in various locations


Here's my challenge: I have an image of a real property that will be loaded at random in a DIV 200 pixels wide. Accordingly the image will be resized to 200 pixels width and variable height (kept proportional). I have four separate captions that need to go onto the image:

  1. Title
  2. Price
  3. Location
  4. Surface

They need to be positioned respectively on the top center, bottom left, bottom left and bottom right of the picture. So I would have something like:

--------------------------------
|             Title            |
|                              |
|                              |
|Price                         |
|Location               Surface|
--------------------------------

I know that I can overlay text to an image by putting the div in relative position and the text in absolute position, but I only seem to be able to set one position for all text divs below, no matter how many classes I use.

Any advice??

EDIT: Found the solution. For reference, here is the code generated:

<div id="stampRandom">
    <img class="stampImg" src="myphoto.jpg">
    <div class="title"><span>Title</span></div>
    <div class="prix"><span>Location</span><span><br><b>Price</b></span></div>
    <div class="surf"><span><b>Surface</span></b></span></div>                  
</div>

And the CSS:

#stampRandom {
    position: relative;
    top: 0px;
    left: 0px;
    width: 200px;
    color: #FFF;
    font-size: 80%;
}

#stampRandom {
    position: relative; 
    top: 0; 
    left: 0; 
    width:200px;
    color: #ffffff;
    /*    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; */
    font-size:80%;
}
#stampRandom img {
    top:0px;
    left:0px;
    width:200px;
}
#stampRandom div {
    position: absolute; 
    width: 200px; 
}
#stampRandom div span {
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(50, 50, 50, 0.7);
}
.title {
    top:2px;
    width:100%;
    text-align:center;
}
.prix {
    bottom:0px;
    left:0px;
}
.surf {
    bottom:0px;
    right:0px;
    text-align:right;
}

Thanks to all who helped out! I was blocked big time and my code needed a major redo. Fresh shot in the arm!


Solution

  • http://jsfiddle.net/h51xLdzg/

    <style>
    .img-cont{position:relative;width:200px;}
    .img-cont div{position:absolute; background:red}
    .img-title{top:0px;width:100%;text-align:center;}
    .img-price{bottom:0px; left:0px;}
    .img-surf{bottom:0px; right:0px;text-align:right;}
    </style>
    <div class="img-cont">
        <img src="/MyImage.jpg" width="200"/>
        <div class="img-title">
            Title
        </div>
        <div class="img-price">
            Price Location 
        </div>
        <div class="img-surf">
            Surface
        </div>
    </div>
    

    Think this will help you