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?
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; }
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.