Добавить изображение наложения поверх отзывчивым изображения

Question

Так вот, что у меня есть:

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/

Все, что я хочу сделать, это нажать кнопку и добавить надлежащее изображение поверх текущего изображения.

Я пробовал все виды, но у меня кончились идеи. Я уверен, что есть легкий ответ с этой позиции.

Answer 1

Попробуйте использовать display:none и display:block вместо display:hidden. Также возникла проблема с вашей укладкой z-index.

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'); 
}); 

Вот demo. И alternate version, используя 2 изображения вместо фонового изображения.