css - div 仅覆盖图像的整个区域

Question

我制作了一个图像，当悬停在其上时会改变其顶部 div 的不透明度。 div 应与图像大小相同。我已经设法将 div 放在图像的顶部。但是，当我将宽度和高度设置为 100% 时，div 覆盖了图像，包括图像的边距。我想知道如何修复它，使 div 只能覆盖不包含边距的图像。请注意，我需要图像具有响应性，所以我不想尽可能地以像素为单位设置高度。

这是 fiddle : https://jsfiddle.net/gsuxlzt/77vn1uyg/

代码如下:

.margin {
  margin-bottom: 10px;
}
.photo-thumbnail {
  position: relative;
}
.photo-title {
  width: 100%;
  height: 100%;
  background-color: #cbe1f4;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  color: #18121e;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.photo-title:hover {
  opacity: .9;
}

<div class="photo-thumbnail">
  <img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg" />
  <a href=#>
    <div class="photo-title">
      <h2 style="padding: 20% 0 20% 0;">Project Title</h2>
    </div>
  </a>
</div>

Answer 1

你可以试试这段代码:

HTML 代码:

<div class="photo-thumbnail"><img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg"/><a href=#>
        <div class="photo-title">
          <h2 style="padding: 20% 0 20% 0;">Project Title</h2>
        </div>
          </a>

CSS 代码:-

.margin {
  margin-bottom: 10px;
}
.img-thumbnail{padding:0px;}
.photo-thumbnail {
  position: relative;
}

.photo-title {
  width: 100%;
  height: 100%;
  background-color: #cbe1f4;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  color: #18121e;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s linear;
}

.photo-title:hover {
  opacity: .9;
}

https://jsfiddle.net/Dhavalr/77vn1uyg/8/