Blend mode layer goes outside image border

Question

So I use a mix-blend-mode: multiply; effect to create a multiply layer on top of my image when hover on. The problem is the layer goes outside of the image border as in the picture below. I tried to set width and height to the .imgcon and .imgcon > img (see code below) and the layer fits in but then it messes up the responsive web function when viewed on different screen resolution. So I tried put width and height to 100% to keep the responsive function, but the layer still goes out of the image border.

Heres my code:

.imgwrapper {
  position: relative;
}



.imgcon + div {
 position: absolute;
  left: 42%;
  top: 44%;
  color: white;
  text-decoration: underline;
  opacity:0;
  display: block;
  pointer-events: none;
  font-size: 18px;
  
  letter-spacing: 4px;

}

.imgcon {
 position: relative;
 background: rgba(209, 19, 15, 0);
  transition: ease 0s;
  -webkit-transition: ease 0s;
  -moz-transition: ease 0s;
  -ms-transition: ease 0s;
  -o-transition: ease 0s;
   mix-blend-mode: multiply;
}
.imgcon > img {
 transition: ease 0s;
  -webkit-transition: ease 0s;
  -moz-transition: ease 0s;
  -ms-transition: ease 0s;
  -o-transition: ease 0s;
}
.imgcon:hover {
  background: #b41f24;
    background: rgba(180, 31, 36, 0.85);


}
.imgcon:hover > img {
  z-index: -1;
  -webkit-filter: grayscale(100%) blur(1.5px) contrast(100%);
  filter: grayscale(100%) blur(1.5px) contrast(100%) ;
  mix-blend-mode: multiply;

}

.imgcon:hover + div {
  display: block;
  opacity: 1;
  z-index: 1;
}

<a href="works.html?option=emkoinvite" class="permalink">
					<div class="desktop-3 mobile-half columns">
						<div class="item first-row">
							<h3>EmKO invitation</h3>
							<span class="category">Identity, print</span>

							<div class="imgwrapper">
							<div class="imgcon">
							<img src="http://i.imgur.com/XmhcxJS.png" /></div>
							<div id="view">view</div></div>
						</div><!-- // .item -->
					</div><!-- // .desktop-3 -->
				</a>

Answer 1

.imgwrapper {
    position: relative;
    display: inline-block;
}

.imgcon > img{display:block}