Create an image overlay

I have an image on a page and a div with info text Code Pen Example.

  <img src=""/>
  <div class="info">
    <a href="#">GO</a>
    <p>Some information text</p>

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 .info element.

Example Here

.overlay {
.info {
  background-color: rgba(240,240,240,0.5);
  padding: 8px;
  text-align: center;
  top:0; right:0;
  bottom:0; left:0;
.overlay img:hover + .info, .info:hover {

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.