div to cover entire area of image only - css

Question

I made an image that when hovered upon will change the opacity of the div on top of it. The div should be the same size as the image. I have managed to place the div on top of the image. However, when I set the width and height to 100%, the div covered the image INCLUDING the image's margin. I want to know how to fix it so that the div can only cover the image with the margin not included. Please note that I need the image to be responsive, so I do not want to set the height in pixels as much as possible.
Here's the fiddle:
https://jsfiddle.net/gsuxlzt/77vn1uyg/
Here's the code:
.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

You can try this code:
Html Code:
<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 Code:-
.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/

Answer 2

first of all, don't use padding and margin for <img> instead use it for .photo-thumbnail
and use this code.
.photo-thumbnail {
position: relative;
display: inline-block;
vertical-align: top;
}
using inline-block for the parent can make image flexible as well as only occupy the necessary area as image.
try this, it will work.

Answer 3

In your example you are missing the closing of your "photo-thumbnail"
You are not obligated to use "Width: 100%", "Height: 100%", when you have an absolutely positioned element, instead you can make it take all of the space with
top: 0;
right: 0;
bottom: 0;
left: 0;
And in your case you can set the
bottom: 10px;
since that is how much your div gets out of the picture
here is an example in a fiddle: https://jsfiddle.net/77vn1uyg/3/