How do I vertically center caption on img hover? - html

Question

I am currently having problems centering my caption inside a div upon hover. The image inside the div is bigger than the div and I want the caption to be vertically centered inside that div?
HTML
<div class="container-fluid">
<div id="page">
<!-- GRID ITEM -->
<div class="item s1">
<a href="#">
<div class="grid-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg">
</div>
<div class="item-caption">
<h5>I want this to be center</h5>
</div>
</a>
</div>
<!-- /GRID ITEM -->
</div>
</div>
CSS
#page .item {
width: calc(16.66% - 10px);
display: inline-block;
height: 0;
float: left;
padding-bottom: 16.66%;
overflow: hidden;
background-color: salmon;
margin: 5px;
position: relative;
}
#page .item.s1 {
width: calc(50% - 10px);
padding-bottom: 50%;
overflow: hidden;
background-color: navy;
}
.item > a {
position: relative;
display: block;
overflow: hidden;
color: white;
}
.item:hover .grid-image:after {
background: rgba(0, 0, 0, .7);
}
.item:hover .grid-image > img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.item:hover .item-caption {
opacity: 1;
z-index: 3;
visibility: visible;
}
.item-caption,
.grid-image > img,
.grid-image:after {
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.item-caption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
text-align: center;
opacity: 0;
}
.grid-image {
position: relative;
overflow: hidden;
}
.grid-image img {
display: block;
overflow: hidden;
}
.grid-image:after {
position: absolute;
display: block;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
}
JavaScript
var $container = $('#page');
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
percentPosition: true,
gutter: 10
});
Here's a fiddle
Thank you!

Answer 1

try this: http://jsfiddle.net/2stywe2t/1/
What I did:
Add a new div to your HTML, right under .item-caption.
Gave .item-caption the display: table attribute and a few others
Gave the new div display: table-cell, and vertical-align: middle
Removed position:relative from the a ancestor
Make sense?

Answer 2

Got the answer !! Just tidy up your code a bit.
var $container = $('#page');
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
percentPosition: true,
gutter: 10
});
#page .item {
width: calc(16.66% - 10px);
display: inline-block;
height: 0;
float: left;
padding-bottom: 16.66%;
overflow: hidden;
background-color: salmon;
margin: 5px;
position: relative;
}
#page .item.s1 {
width: calc(50% - 10px);
padding-bottom: 50%;
overflow: hidden;
background-color: navy;
position: relative!important;
}
.item > a {
position: absolute;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
color: white;
}
.item:hover .grid-image:after {
background: rgba(0, 0, 0, .7);
}
.item:hover .grid-image > img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.item:hover .item-caption {
opacity: 1;
z-index: 3;
visibility: visible;
}
.item-caption, .grid-image > img, .grid-image:after {
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.item-caption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
text-align: center;
opacity: 0;
display: table;
height: 100%;
width: 100%;
}
.grid-image {
position: relative;
overflow: hidden;
}
.grid-image img {
display: block;
overflow: hidden;
}
.grid-image:after {
position: absolute;
display: block;
content:"";
height: 100%;
width: 100%;
top: 0;
left: 0;
}
h5 {
display: table-cell;
vertical-align: middle;
}
<div class="container-fluid">
<div id="page">
<!-- GRID ITEM -->
<div class="item s1"> <a href="#">
<div class="grid-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg">
</div>
<div class="item-caption">
<h5>I want this to be center</h5>
</div>
</a>
</div>
<!-- /GRID ITEM -->
</div>
</div>
</body>
</html>

Answer 3

You simply need to add one line of code to your CSS to make this work:
h5 {
margin-top: 50%;
transform: translateY(-50%); /* not entirely necessary, but makes centering precise */
}
DEMO: http://jsfiddle.net/2stywe2t/4/