CODEWITHSUNDEEP
imagecssoverlay
Michael Wilson
Michael Wilson

Reputation: 283

Add an overlay image over the top of a responsive image

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.

Upvotes: 1

Views: 4962

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62791

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.

Upvotes: 1

Related Questions