Can you help me solve this challenge? I have an image of a real property that will be randomly loaded into a DIV with a width of 200 pixels. The image needs to be resized to 200 pixels wide while maintaining its proportional height. Additionally, I have four different captions that need to be placed on the image:
- Title
- Price
- Location
- Surface
These captions should be positioned respectively at the top center, bottom left, bottom left, and bottom right of the picture. Here's the layout I'm looking for:
--------------------------------
| Title |
| |
| |
|Price |
|Location Surface|
--------------------------------
I've tried overlaying text onto an image by using relative positioning for the div and absolute positioning for the text, but I can't seem to set individual positions for each text div regardless of how many classes I create.
Any advice or suggestions would be greatly appreciated!
UPDATE: After some more digging, I managed to find a solution. Here is the code snippet I used:
<div id="stampRandom">
<img class="stampImg" src="myphoto.jpg">
<div class="title"><span>Title</span></div>
<div class="price"><span>Location</span><span><br><b>Price</b></span></div>
<div class="surface"><span><b>Surface</span></b></span></div>
</div>
And here's the corresponding CSS:
#stampRandom {
position: relative;
top: 0px;
left: 0px;
width: 200px;
color: #FFF;
font-size: 80%;
}
#stampRandom img {
top:0px;
left:0px;
width:200px;
}
#stampRandom div {
position: absolute;
width: 200px;
}
#stampRandom div span {
background: rgba(50, 50, 50, 0.7);
}
.title {
top:2px;
width:100%;
text-align:center;
}
.price {
bottom:0px;
left:0px;
}
.surface {
bottom:0px;
right:0px;
text-align:right;
}
Thank you to everyone who offered their assistance! Your insights were invaluable in helping me overcome my coding roadblock and giving my project a much-needed refresh.