CSS position absolute and height 100% issue on Chrome - html

Question

I have an issue with a container on 100% height not working on Chrome.
In short, it's a caption from an image which is appearing over the image while hovering it.
.item {
position: relative;
}
.caption {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
display: table;
top: 0;
left: 0;
box-sizing: border-box;
border-radius: 4px;
opacity: 0;
transition: 0.2s;
}
a:hover .caption {
opacity: 1;
transition: 0.2s;
}
.caption .caption-inter {
display: table-cell;
vertical-align: middle;
}
.item img {
width: 100%;
}
<div class="item">
<a href="#blabla">
<img src="//i.stack.imgur.com/tiQ1S.jpg">
<div class="caption">
<span class="caption-inter">caption of the image</span>
</div>
</a>
</div>
It works on Firefox, IE, but for Chrome, the caption with background only appear at the top of the image.
Any idea how I could make it work in Chrome?

Answer 1

Looks like Chrome doesn't apply the height:100% when position:absolute and display:table is also being set at the same time, and of course there is also position:relative set on the wrapper.
I would suggest to use flexbox for the caption for easy centering, and use the HTML5 semantic <figure> + <figcaption> elements for the markup.
.caption {
...
display: flex;
justify-content: center;
align-items: center;
}
Follow this post to find more ways of centering for both horizontally and vertically.
Snippet
.figure {
position: relative;
display: inline-block; /*NEW*/
margin: 0; /*NEW*/
}
.image {
border-radius: 4px;
width: 100%;
height: auto;
display: block;
}
.caption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: white;
box-sizing: border-box;
border-radius: 4px;
opacity: 0;
transition: 0.2s;
display: flex; /*NEW*/
justify-content: center; /*NEW*/
align-items: center; /*NEW*/
}
a:hover .caption {
opacity: 1;
}
<a class="item" href="#">
<figure class="figure">
<img class="image" src="//i.stack.imgur.com/tiQ1S.jpg">
<figcaption class="caption">
caption of the image
</figcaption>
</figure>
</a>

Answer 2

It's sometimes needed to give the container element, that's wrapping an absolute element, position: relative, to wrap the absolute element as expected.
Besides that, you should change the caption to display: block so it can actulaly apply the width: 100%.
/* added this */
#blabla {
/* its important to give the container position: relative,
when it's wrapping an absolute element */
position: relative;
/* It's needed to give the anchor tag "inline-block" attribute so it
can receive width and height, since it's an inline element */
display: inline-block;
}
.caption {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
/* changed from table to block */
display: block;
top: 0;
left: 0;
box-sizing: border-box;
border-radius: 4px;
opacity: 0;
transition: 0.2s;
}
a:hover .caption {
opacity: 1;
transition: 0.2s;
}
.caption .caption-inter {
display: table-cell;
vertical-align: middle;
text-overflow: ellipsis;
}