Text position coming from bottom - html

Question

Basically I have a title inside an image. As you can notice from the code and example below, I've set a negative margin-top to position it inside the image, near the bottom. The problem is that the text position/orientation is from top to bottom. Meaning that the more text the title has, the longer it will be, towards the bottom. I want to make it reverse - so that the text div expands the text towards the top, according to its size.
Is it possible? Thank you in advance.
Here is the example http://jsfiddle.net/j7gLd/
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 title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a 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;
}

Answer 1

Here is what you are looking for, give .image position:relative and .title bottom:0; fiddle
<div class="image">
<img src="http://s23.postimg.org/g033nno17/image.jpg"/>
<div class="title">This is a title Maurizzle pellentesque nibh black turpizzle. Doggy izzle tortizzle. Pellentesque eleifend rhoncus crunk. In hac habitasse funky fresh dictumst. Donec dapibizzle. Curabitizzle tellizzle fo shizzle my nizzle, pretizzle own yo', that's the shizzle away, shizznit vitae, nunc. Stuff suscipit. Dawg sempizzle velit sizzle pizzle.</div>
</div>
<div class="image" style="background:red;">
<img src="http://s23.postimg.org/g033nno17/image.jpg"/>
<div class="title">This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a titl Lorizzle ipsizzle dolor crunk amizzle, consectetizzle adipiscing get down get down. Mofo dawg velizzle, shiz volutpat, suscipit quis, gravida vel, pimpin'. Pellentesque eget tortor. Sed erizzle. Dope at dapibizzle away tempus shiz. Maurizzle pellentesque nibh black turpizzle. Doggy izzle tortizzle. Pellentesque eleifend rhoncus crunk. In hac habitasse funky fresh dictumst. Donec dapibizzle. Curabitizzle tellizzle fo shizzle my nizzle, pretizzle own yo', that's the shizzle away, shizznit vitae, nunc. Stuff suscipit. Dawg sempizzle velit sizzle pizzle.e</div>
</div>
.image {
width: 820px;
height: 530px;
margin: 10px;
position:relative;
}
.title {
position: absolute;
display:block;
background-color: #CCC;
padding: 5px;
bottom:0;
width:790px;
vertical-align:bottom;
}

Answer 2

Set the title to position:absolute;bottom:0;

Answer 3

May i suggest you something different?
Have a look on this fiddle.
Also added hover to see the title.
HTML
<div class="image" style="background-image: url('http://placekitten.com/200/150');">
<div class="footerBar">Small Title</div>
</div>
<div class="image" style="background-image: url('http://placekitten.com/200/150');">
<div class="footerBar">Very Very Very Very Very Very Very Very Very Very Very Very Very Long Title</div>
</div>
CSS
.image {
width: 200px;
height: 150px;
position: relative;
}
.footerBar {
background-color: lightGrey;
position: absolute;
bottom: 0px;
width: 100%;
overflow: none;
display: none;
word-wrap:break-word;
}
.image:hover .footerBar {
display: block;
}

Answer 4

Is vertical-align what you are looking for?