要实现保持响应式图片覆盖层与图片大小相同的效果，可以使用CSS和JavaScript来实现。

HTML部分：

CSS部分：

.image-container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置覆盖层的背景颜色 */
  opacity: 0; /* 如果初始不需要显示覆盖层，可以将透明度设置为0 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

.image-container:hover .overlay {
  opacity: 1; /* 鼠标悬停时显示覆盖层 */
}

JavaScript部分：

window.addEventListener('load', function() {
  var image = document.querySelector('.image-container img');
  var overlay = document.querySelector('.overlay');

  overlay.style.width = image.offsetWidth + 'px';
  overlay.style.height = image.offsetHeight + 'px';
});

以上代码将在页面加载完成后，使用JavaScript动态设置覆盖层的宽度和高度与图片相同。通过CSS设置覆盖层的背景颜色和透明度，以及添加过渡效果，当鼠标悬停在图片上时，显示覆盖层。

请注意将"your-image-source.jpg"替换为你自己的图片路径。