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