JSFiddle - React, Tailwind, and code Playground

by ijse

HTML

<div id="container">
    <div id="faded_div">
        
    </div>
    <div id="shadow_div">
        <img src="http://www.gravatar.com/avatar/5a23440efccf7e860c3a732700052600?s=128&d=identicon&r=PG" />
    </div>
</div>

CSS

#container { width:800px; height:600px; position:relative; }
#faded_div { 
    width:400px;
    height:300px;
    background-color:blue;
}

#shadow_div {
     position:absolute;
     left:0;
     top:0; 
     background-color: pink;
     display:none;
}
#shadow_div img {
     position:absolute;
     left:50%;
     top:50%; 
     margin-left:-64px;
     margin-top:-64px;
     cursor:pointer;
}

JavaScript

$("#faded_div").click(function() {
   $(this).fadeOut(); 
   $("#shadow_div").width($(this).width())
                   .height($(this).height())
                   .fadeIn();
});