how to make same width of overlay div over image when collapse?

hello, i need your help, i have a div overlay when hover on image. i just want the width of div(overlay) to be the same width of the image or thumbnail when collapse at different sizes especially when collapse at 767px. i’m using a bootstrap framework. here’s the jsfiddle.

here’s the code:

<div class="container port-thumbnail wow animated fadeInUp" data-wow-delay="1s">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="img-thumbnail">

<a href="https://localhost/wordpress/wp-content/uploads/2015/10/web-e1444279168807.jpg"><img class="alignnone wp-image-46 size-full img-responsive" src="https://localhost/wordpress/wp-content/uploads/2015/10/web-e1444279168807.jpg" alt="web" /></a>
<div><span>VIEW WEB DESIGN</span>
<a class="preview" href="https://localhost/wordpress/portfolio/web-design">[fa class="fa-search-plus fa-3x"]</a>
</div>
</div>
</div>

CSS:

main > section > div.container.port-thumbnail.wow.animated.fadeInUp > div.row > div.col-xs-12.col-md-4 > div.img-thumbnail:hover > div{
	opacity:1;
}

main > section > div.container.port-thumbnail.wow.animated.fadeInUp > div.row > div.col-xs-12.col-md-4 > div.img-thumbnail > div {

	top:5px;
	position: absolute;
	background: rgba(0,0,0, 0.5);
	width: auto;
	height: auto;
	border:0px solid rgba(0,0,0,0.3);

	opacity:0;
	background:#00a997;

   -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;

}

main > section > div.container.port-thumbnail.wow.animated.fadeInUp > div.row > div.col-xs-12.col-md-4 > div.img-thumbnail > div > span{
	display: block;
	padding: 10px 0;
	margin: 40px 20px 20px 20px;
	font-weight: normal;
	text-align:center;
	color: rgba(255,255,255,0.9);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}