center content over image on hover - html

Question

I have an image gallery. I want to display a piece of content (# of likes the photo has on instagram)in the center of the image when the image is hovered over. This content and the image are siblings under the same parent element, so I'm trying to use position: relative; and bottom: 50%; on the content. The result is that the content (class of p.likes) does not move up 50% of it's parent element. Why is this not working?
.photo-box {
width: 100%;
display: inline-block;
margin: 0 0 .75em;
background-color: lightgrey;
/*border: 1px solid pink;*/
}
.photo-box .image-wrap {
width: 100%;
height: auto;
max-height: 100%;
padding: none;
background-color: lightgrey;
/*border: 1px solid red;*/
}
.image-wrap img {
width: 100%;
display: inline-block;
margin-bottom: 0px;
padding: none;
}
.image-wrap:hover img {
opacity: .8;
}
.image-wrap a {
height: 100%;
width: 100%;
margin: 0px;
padding: none;
}
p.likes {
width: 100%;
visibility: hidden;
position: relative;
bottom: 50%;
text-align: center;
font-family: 'Open Sans', sans-serif;
color: #fff;
/*border: 1px solid red;*/
}
.photo-box:hover p.likes {
visibility: visible;
}
<div class="photo-box">
<div class="image-wrap wow fadeIn">
<a href="{{link}}" target="_blank">
<img src="{{image}}">
</a>
<p class="likes"><i class="fa fa-heart" aria-hidden="true"></i> {{likes}}</p>
</div>
</div>

Answer 1

The parent element needs a set positioning in order for the child elements to move in relation to the container. One way you can do this is first adding position: relative on the .image-wrap parent div. Then, on the .likes class, replace the relative positioning with position: absolute.
I added your code to a pen to test this out (and modified it slightly), but is this what you're going for? I threw a transition in there but you can remove that and play with the bottom properties to get it where you want. Also note that I added a static height to the parent.
Pen