Picture show text on hover as "rollover" - html

Question

I want to make a "roll over text" when you hover the image container.
I did it fine, but only with position absolute, but i cant get it right with position relative.
Now the Text comes after the Image but i need the text as an small overlay to the bottom of the image
<div class="ce_image team block">
<figure class="image_container">
<img src="assets/images/c/De****-D1-6a7e730c.jpg" width="300" height="300" alt="">
<figcaption class="caption" style="width:300px">The text i want to display on hover</figcaption>
</figure>
</div>
css: (ps: i quess my css is really bad, never made smth like this)
.image_container {
position: relative;
display: inline-block;
padding: 0.75em;
border: 1px solid #b2b9c4;
border-radius: 2px;
background: #ffffff;
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.team .image_container figcaption, .team .image_container .caption {
width: 100% !important;
padding: 0.42857em 0 0;
font-size: 1.0em;
display: none !important;
display: fixed;
color: #000000;
font-weight: bold;
position: static !important;
text-align: center;
top: 100px;
z-index: 999;
opacity: 0;
transition: opacity 0.2s linear !important;
left: 0px;
background: rgba(255, 255, 255, 0.9);
position: relative;
}
.team .image_container:hover figcaption, .team .image_container:hover .caption {
width: 100% !important;
padding: 0.42857em 0 0;
font-size: 1.0em;
color: #000000;
font-weight: bold;
text-align: center;
top: -31px;
z-index: 999;
opacity: 1;
left: 0px;
background: rgba(255, 255, 255, 0.9);
position: relative;
display: block !important;
}
Fiddle with css here:
https://jsfiddle.net/vm73gfhn/

Answer 1

I updated some of your CSS so that the text sits at the bottom. You need position absolute rather than position relative:
.image_container {
position: relative;
display: inline-block;
padding: 0.75em;
border: 1px solid #b2b9c4;
border-radius: 2px;
background: #ffffff;
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.team .image_container figcaption, .team .image_container .caption {
display: none !important;
}
.team .image_container:hover figcaption, .team .image_container:hover .caption {
width: 100% !important;
padding: 0.42857em 0 0;
font-size: 1.0em;
color: #000000;
font-weight: bold;
text-align: center;
bottom: 0px;
z-index: 999;
opacity: 1;
left: 0px;
background: rgba(255, 255, 255, 0.9);
position: absolute;
display: block !important;
}
JSFIDDLE
Additional
If you want it to work for mobile and tablets then use media queries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp