Display or over image on :hover

Question

I\'m looking for a method that would allow a div or span element to appear over a image when you :hover over that image. I\'m able to

Answer 1

Similarly to this answer I gave, you could absolutely position the .overlay element relative to the parent element and give it a height and width of 100% this should work for all img sizes given that the parent element will be inline-block (it's the same size as its containing elements).

EXAMPLE HERE

HTML Structure:

<div class="image">
    <img src="..." />
    <div class="overlay">The content to be displayed on :hover</div>
</div>

General CSS:

Hide the .overlay element by default, and use the selector .image:hover .overlay to change the styling on hover. Due to the HTML structure, this works well because .overlay is a descendant element. You can therefore avoid using the the general/adjacent sibling combinators +, ~. Box-sizing is used to calculate the element's dimensions with respect to border, padding.. etc.

.image {
    position:relative;
    display:inline-block;
}
.overlay {
    display:none;
}
.image:hover .overlay {
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;

    /* All other styling - see example */

    img {
        vertical-align:top; /* Default is baseline, this fixes a common alignment issue */
    }
}