Imagine having a title inside an image, positioned near the bottom with a negative margin-top. The issue arises when the text orientation expands from top to bottom as more content is added. Is there a way to reverse this, so that the text div grows towards the top based on its size?
Any suggestions or solutions would be greatly appreciated.
You can view an example here
HTML
<div class="image">
<img src="image.jpg">
<div class="title">This is a title</div>
</div>
<div class="image">
<img src="image.jpg">
<div class="title">This is a long title...</div>
</div>
CSS
.image {
width: 800px;
height: 530px;
margin: 10px;
}
.title {
position: absolute;
background-color: #CCC;
max-width: 600px;
margin-top: -80px;
padding: 5px;
}