<a href="">
     <div class="img-overlay">
   <img src="https://www.askideas.com/media/50/Oh-Really-Please-Tell-Me-More-Funny-Meme-For-Facebook-Comment-Image.jpg" alt="Avatar" class="img-overlay-image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
</a>

.img-overlay {
  position: relative;
  width:25%;
}

.img-overlay-image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,.5);
}

.img-overlay:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.