Unable to set height of hover overlay to 100% of container

Question

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!

Although I can visit your Jsfiddle, but the Result pane is blank -- is it blank for you too? — clarity123, Nov 20 '15 at 03:24
Hmm no, I just checked and I see eight Instagram photos. Sorry, not sure what's wrong with it. — Mario Parra, Nov 20 '15 at 03:25
I can see and use the fiddle. Trying to figure out a solution :) — mattdevio, Nov 20 '15 at 03:35
#instafeed a { position: relative; } is not inherit height correctly. — 0x860111, Nov 20 '15 at 03:36
@0x860111 You cannot set height to an inline anchor element!! https://jsfiddle.net/bct3py0k/ , as for the author please see: http://www.korenlc.com/css-overlay-how-to-create-a-simple-css-overlay/ — R T, Nov 20 '15 at 03:44

score 3 · Accepted Answer · edited May 23 '17 at 11:51

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%:

Updated Example

#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;
}

That makes sense. Thanks for the explanation! I'll have to read up on more default `display` values. — Mario Parra, Nov 20 '15 at 03:59

score 1 · Answer 2 · answered Nov 20 '15 at 03:47

Here is how I fixed it.

CSS

#instafeed {
  width: 100%;
  margin:0px;
}
#instafeed a {
  position: relative;
  display:inline-block;
  float:left;
  width: 25%;
}
#instafeed .ig-photo {
  width: 100%;
  vertical-align: middle;
}
#instafeed .likes {
  position: absolute;
    width: 100%;
  opacity: 0;
  font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
  font-size: 28px;
  color: #ffffff;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);  
  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;
    z-index:10;
}
#instafeed a:hover .likes {
  opacity: 1;
}
#instafeed a:hover::after{
    content:"";
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: #f18a21;
    opacity:0.7;
    z-index: 5;
}

updated fiddle

Unable to set height of hover overlay to 100% of container

2 Answers2