Simplify Jquery

HTML

<div class="img" id="img-1">
                  <div class="overlay" id="overlay-1">
                    <p>Hello World!</p>
                  </div>
                 <img src="https://s-media-cache-ak0.pinimg.com/736x/bf/4e/40/bf4e4067252227bd3f758bba7dcee2ff.jpg" alt="image">
              </div>
              <div class="img" id="img-2">
                  <div class="overlay" id="overlay-2">
                    <p>Hello World!</p>
                  </div>
                 <img src="https://s-media-cache-ak0.pinimg.com/736x/bf/4e/40/bf4e4067252227bd3f758bba7dcee2ff.jpg" alt="image">
              </div>

CSS

}
.img{
	position: relative;
}
.img > img{
	width: 200px;
	height: 200px;
}
.overlay{
	background-color: #f7c845;
	z-index: 100;
	position: absolute;
	height: 200px;
	width: 200px;
	display: none;
}
.overlay > p {
	text-align: center;
	color: #212121;
	padding: 20px 40px;
}

JavaScript

$('#img-1').hover(function(){
      $('#overlay-1').stop().fadeToggle(400);
  });
    $('#img-2').hover(function(){
      $('#overlay-2').stop().fadeToggle(400);
  });
  
  // I want these to work simpler...say if I have 5 this would be messy.