Add an overlay image over the top of a responsive image - image

Question

So here is what I have:
HTML
<div class="frame-container">
<img src="http://placehold.it/400x600" id="image" alt="test" />
<div class="overlay"></div>
</div>
<button id="button">Add Overlay</button>
CSS
.frame-container{
padding: 15%;
background-color: #333333;
-webkit-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
-moz-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
}
#image {
width:100%;
overflow: hidden;
}
.frame-holder{
border: 4em #000000 solid;
}
.overlay{
width:100%;
height:100%;
background-color:fff;
background-image: url('http://placehold.it/400x600&text=woo!');
background-size:cover;
z-index:9999;
display:hidden;
}
JS
<script>
$('#button').click(function(){
$('.overlay').css( "display", 'inline'; );
});
</script>
https://jsfiddle.net/vwvu5ee8/7/
All I want to be able to do is click the button and it add the overlay image over the top of the current image.
I've tried all sorts but have started to run out of ideas. I'm sure there is an easy answer from this position.

Answer 1

Try using display:none and display:block instead of display:hidden. There was also an issue with your z-index stacking.
HTML
<div class="frame-container">
<div class="overlay"></div>
<img src="http://placehold.it/400x600&text=Image" id="image" alt="test" />
</div>
<button id="addOverlay">Add Overlay</button>
CSS
.frame-container{
padding: 15%;
background-color: #333333;
position:relative;
-webkit-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
-moz-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
}
#image {
width:100%;
overflow: hidden;
position:relative;
z-index:10;
}
.overlay{
width:70%;
height:70%;
position:absolute;
background-color:fff;
background-image: url('http://placehold.it/400x600&text=Overlay');
background-size:cover;
z-index:100;
display:none;
}
JS
$('#addOverlay').click(function(e){
$('.overlay').css('display','block');
});
Here's the demo. And an alternate version using 2 images instead of a background image.