Display <div> or <span> over image on :hover

css, hover, html, image

Solution

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 */
    }
}

Problem

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 do this using the `.image:hover ~ .overlay`, but it's not exactly what I'm looking for. The `div` or `span` element needs to take the dimensions of the images, since there will be multiple sizes. Example `<img width="200" height="200"/>` would allow you to `:hover` changing the `div` or `span` element from `display: none` to `display: block` (doesn't necessarily need to be a block). The element that's being changed from invisible to visible would have to automatically detect the size of the image and match the size of the element to these same dimensions (200x200). However, I could also have a `<img width="300" height="400"/>` that would need the element to match the size (300x400). I'm also looking for a super easy way for these elements to be positioned perfectly over the images. Here's my code pen to show what I've got so far.

Original source