9

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.

Matthew Beckman
  • 1,702
  • 2
  • 16
  • 28
  • 1
    Take a look at [this answer](http://stackoverflow.com/questions/19440376/text-and-opacity-change-for-image-hover-css/19440479#19440479) I gave a while ago; it's using the `:after` pseudo element.. would you want something along those longs, or would you want the actual content to be a DOM element? – Josh Crozier Jan 27 '14 at 01:31
  • 1
    @JoshC This is _almost_ exactly what I'm looking for, but I need the actual content to be a DOM element. P.S. I love how fast you're able to answer questions :) – Matthew Beckman Jan 27 '14 at 01:33

1 Answers1

18

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 */
    }
}
Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304