Make text always stick at bottom of image for responsive site - html

Question

I have a small div under each image that I need to be exactly at the bottom of the image also when my site is viewed on small devices. My whole site is in Bootstrap-3 already, but now my current code shows the small div called DATA half way over the image when viewed on smaller devices.
Two issues:
1 - How to make the div (data) have the responsive width of the responsive image always?
2 - How to make sure the div (data) sticks at the bottom of the image always for different device dimensions?
I was messing around with top:400px but I cannot get it right, and width should actually always be 100% namely the width of the image but still my div sticks out way too much...
.image {
max-width: 100%;
max-height: 100%;
margin: 0;
display: block;
padding: 0px;
}
.data {
font-size: 11px;
font-family: 'Source Sans Pro',sans-serif;
font-style: normal;
color: #FFF;
font-weight: 700;
background-color: #000;
opacity: 0.7;
padding: 0 10px 0 10px;
border-bottom: 0px solid #FFF;
z-index: 3;
display: block;
position: absolute;
opacity: 0.7;
top: 400px;
left: 0;
min-width: 100%;
}
<div class="block">
<div class="item">
<div class="image"><img alt="" src="http://lorempixel.com/400/400" /></div>
<div class="tag">
TAG
</div>
<div class="title">
title
</div>
<div class="data">
<div class="date">
01012001
<div class="author">
Author
</div>
</div>
</div>
</div>
</div>

Answer 1

I hope i understand u right... so, your issue is:
Div .data must be always 100% width over the image?
Div .data must be always at bottom on the imate?
So check that:
.image {
position: relative;
display: inline-block; /* This can be inline too */
margin: 0 auto;
padding: 0px;
}
.image .data {
padding: 0 10px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.7);
font-size: 11px;
font-family: 'Source Sans Pro',sans-serif;
font-style: normal;
font-weight: 700;
color: #FFF;
}
<div class="block">
<div class="item">
<div class="image">
<img alt="" src="http://lorempixel.com/400/400" />
<div class="data">
<div class="date">
01012001
<div class="author">
Author
</div>
</div>
</div>
</div>
<div class="tag">
TAG
</div>
<div class="title">
title
</div>
</div>
</div>
Some advices- try to group css styles. Use better selectors. Try to use all HTML 5 tags- for example, image can be wrapped with figure tag and the .data element- can be just figurecaption.
Good luck!