I'm facing an issue with aligning my caption vertically inside a div when hovering. The image within the div is larger than the div, and I want the caption to be at the center of the 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 would like this to be centered</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
});
Thank you!