I'm using the Instafeed.js plugin and trying to style the "likes" hover overlay to fill the entire image box, however, I'm struggling to set the height to 100%.
I'm trying to avoid setting the container's height to a pixel value since the entire plugin is currently responsive.
I've looked around and tried different combinations of display and position values, but it's been mostly trial and error.
CSS:
#instafeed {
width: 100%;
margin-bottom: 80px;
}
#instafeed a {
position: relative;
}
#instafeed .ig-photo {
width: 25%;
vertical-align: middle;
}
#instafeed .likes {
width: 100%;
height: auto;
top: 0;
left: 0;
right: 0;
position: absolute;
background: #f18a21;
opacity: 0;
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 28px;
color: #ffffff;
line-height: 100%;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 100ms ease;
-moz-transition: opacity 100ms ease;
-o-transition: opacity 100ms ease;
-ms-transition: opacity 100ms ease;
transition: opacity 100ms ease;
}
#instafeed a:hover .likes {
opacity: 0.8;
}
Demo: http://jsfiddle.net/rc1wj5t9/
Any help/advice would be appreciated!
It's because the anchor elements are inline by default, which means that they are not inheriting the height of their children img elements.
One possible solution is to set the display of the anchor elements to inline-block, and specify a width of 25%. Then for the children img elements, set a max-width of 100%:
#instafeed a {
position: relative;
display: inline-block;
max-width: 25%;
}
#instafeed .ig-photo {
max-width: 100%;
vertical-align: middle;
}
#instafeed .likes {
width: 100%;
height: auto;
top: 0; right: 0;
bottom: 0; left: 0;
}
To center the text, I used one of the techniques for vertically/horizontally centering text from one of my previous answers.
#instafeed .likes > span {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
white-space: nowrap;
}