Create an image overlay
I have an image on a page and a div with info text Code Pen Example.
I would like the div Info to be invisible and when I move the mouse over the image the div would show over the image, with a transparency, and exactly the same width and height of the image.
And I would like the anchor inside the div Info to be on the right up corner. How can I do this?
No jQuery needed.
You need to relatively position the parent element,
.overlay. You could also change the display to
inline-block if you want it to take the dimensions of the
img element. Absolutely position the
.info element to take the same size as the parent. Use a
rgba() color for transparency. Use the selectors
.overlay img:hover + .info, .info:hover to change the display of the
.info element to
block when hovering over the
img and the
If you want the overlay to fade/transition, simply manipulate the element’s
opacity rather than changing the display. (example).
For a better, more detailed answer - see my other answer here.