Bootstrap (CSS) - Overlay One Img over another using responsive design - html

Question

What CSS do I need to use so that one img "under construction" is overlayed in the top left corner of the 1st image. The section of script this pertains to is the second column in the row. I've tried various solutions using position in css but have come up with nothing that is consistent with page resizing. I need a responsive solution.
<div class="col-lg-6">
<h2 class="text-center">Current Conditions</h2>
<img src="#Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" />
<p class="text-center">View the current weather conditions in relation to Crestwood Assets</p>
<p class="text-center">
Launch <span class="glyphicon glyphicon-chevron-right"></span>
Documentation <span class="glyphicon glyphicon-chevron-right"></span>
</p>
</div>
<div class="col-lg-6">
<h2 class="text-center">Historical Weather</h2>
<img src="#Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" />
<img src="#Url.Content("~/Content/Img/under-construction.png")" id="under-construction" class="img-responsive center-block img-overlay" />
<p class ="text-center">Leverage historical weather data for analysis with asset data.</p>
<p class ="text-center">
Launch <span class="glyphicon glyphicon-chevron-right"></span>
Documentation <span class="glyphicon glyphicon-chevron-right"></span>
</p>
</div>
</div>
EDIT
I modified to include the images in a div and provided some additional CSS.
<div id="img-container">
<img src="#Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" />
<img src="#Url.Content("~/Content/Img/under-construction.png")" id="under-construction" class="img-responsive center-block img-overlay" />
</div>
.img-overlay{
position:absolute;
top:0;
left:0;
z-index:3;
}
#img-container{
position:relative;
}
EDIT 2
I attempted to fit it using the top and left attributes:
.img-overlay{
position:absolute;
top:0;
left:14.5%;
z-index:3;
}
This worked great at my initial width but when sized down to a smaller window it is pushed in. I would like to be consistent.

Answer 1

Here's how to put a picture above another picture: http://codepen.io/ruchiccio/pen/ZWZEEy
More than that I can't help because you haven't supplied normal paths to images so we can't see what should go onto what. Maybe provide a screenshot of what you'd like.
<div id="container">
<img id="pic1" src="http://placehold.it/350x150">
<img id="pic2" src="http://placehold.it/150x50">
</div>
#container {
position: relative;
}
#pic2 {
position: absolute;
top: 0;
left: 0;
z-index: 3;
}