DIV darkened overlay over another div needed
Posted: Tue Apr 26, 2016 4:52 am
Hi
We are looking adding in a footer of a site, a row of thumbnail images each in a floating div.
When the user hovers over that div/image, we want it to darken and some text appear over it in the middle.
I assume I could add a div that would be the same height as the div containing the image, and on over of that DIV, the other div's display would become "block" and we could set the opacity.
Cannot seen to figure out how to do this though?
I think to make the overlayed div the full height of it's container, we would need to maybe use the image that's pushing out the existing div's size, (or a transparent copy of it), so that overlay is forced to be full size.
But how do we make the overlay div hide.. and then show on hover, purely with CSS?
We are looking adding in a footer of a site, a row of thumbnail images each in a floating div.
When the user hovers over that div/image, we want it to darken and some text appear over it in the middle.
I assume I could add a div that would be the same height as the div containing the image, and on over of that DIV, the other div's display would become "block" and we could set the opacity.
Cannot seen to figure out how to do this though?
I think to make the overlayed div the full height of it's container, we would need to maybe use the image that's pushing out the existing div's size, (or a transparent copy of it), so that overlay is forced to be full size.
But how do we make the overlay div hide.. and then show on hover, purely with CSS?