Show a thumbnail caption on hover centered - html

Question

I'm trying to show a thumbnail caption on hover centered: aligned horizontal and vertical, but not successful.
In the fiddle you see a responsive thumbnail grid with on hover a caption. I gave it a dashed red border so you can see that it is not same size as the thumbnail. I can't get the title caption to be centered in the thumbnail. Maybe my thumbnail grid need a different build. Hope someone can help me.
Here is the fiddle
#content {
position: relative;
display: inline-block;
margin: 110px 40px 100px 40px;
background-color: transparent;
}
.col-25 {
position: relative;
float: left;
width: 25%;
margin: 0;
}
.thumb {
display: block;
margin: 10px;
}
.col-25 img {
width: 100%;
height: auto;
}
.col-25 a:hover img {
opacity: 0.1;
}
.caption {
position: absolute;
top:0;
left:0;
border: dashed 1px red;
width:100%;
height:100%;
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.col-25 a:hover .caption {
opacity: 1;
}

Answer 1

http://jsfiddle.net/a0zwecou/14/
I have added an inner div to caption and give it a margin height of 25%. Remove the margin for extremely small width size in your media query.
<div class="caption">
<div class="inner-caption">
<h3>Untitled for now</h3>
<p>Caption</p>
</div>
</div>
CSS -
.inner-caption{margin-top:25%;}

Answer 2

JSFIIDLE
only by changing the height and adding padding to caption class.
.caption {
position: absolute;
padding-top:25%;
top:0;
left:0;
border: dashed 1px red;
width:100%;
height:60%;
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

Answer 3

Try this,
.thumb:hover{border:1px dashed red;background-color:red;}
.caption {
position: absolute;
top:40%;
left:0;
/*border: dashed 1px red;*/ //remove it
width:100%;
/*height:100%;*/ // remove it
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
Fiddle : http://jsfiddle.net/a0zwecou/20/

Answer 4

see the fiddle here:
http://jsfiddle.net/a0zwecou/13/
and add css:
.caption h3 {
margin-top: 59px;
}

Answer 5

You can simply wrap your caption inside another div and centered that with transate(with all prefixes of course), OR you can simply center that using tables (table + table-cell)
HERE THE PEN, hover the first.
.insideCap{
background: red;
top: 50%;
position: absolute;
width: 100%;
transform: translateY(-50%);
}
OTHER WAY:
parent{
dispaly:table;
}
son{
display: table-cell;
vertical-align: middle;
}

Answer 6

you can try this:
<div id="content">
HTML:
Add this div:
<div class="col-25">
<a class="thumb" href="#">
<img src="http://fakeimg.pl/500x310/999/">
<div class="caption"><div class="caption-text"><h3>Untitled for now</h3><p>Caption</p></div></div>
</a>
</div>
CSS:
add this css in your style:
.caption-text {
left: 0;
position: absolute;
right: 0;
top: 32%;
}
SEE JS Fiddle DEMO