Overlay on image

hi guys, i need some help, i have an overlay in an image everytime i hover the image the overlay appear but what i need in my overlay is to be responsive. I noticed my “overlay” depend on my “col-xs-12 col-md-4”, im using bootstrap code, because it depends on “col-xs-12 col-md-4” i need to adjust the “overlay” every time i adjust the browser from 1200px, 991px, 768px. How can i maintain the width of my “overlay” and position in different mobile sizes?

here’s the code:

<!--THUMBNAILS PORTFOLIO-->
<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" src="https://localhost/wordpress/wp-content/uploads/2015/10/web-e1444279168807.jpg" alt="web" width="340" height="245" /></a>
<div class="overlay">
<div class="recent-work-inner">
<h4>VIEW WEB DESIGN</h4>
<a class="preview" href="https://localhost/wordpress/portfolio/web-design">[fa class="fa-search-plus fa-3x"]</a>
</div>
</div>
<div class="thumb-caption">
<h4>WEB DESIGN</h4>
</div>
</div>
</div>

CSS:

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

	position:absolute;
	top:0;
	/*left:15px;*/
	width:89%;
	height:100%; 

	opacity:0;
	border-radius:0;
	background: #00a997;

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

}