I have created this for you in the hopes that it will be helpful.
Within a container, which could represent the window of your game, I have included the "game over" container that you wish to display.
The remaining HTML provides some placeholder content inside the game container:
<div class="container">
<div class="stuff">and here is stuff</div>
<div class="stuff">etc, ect, ect</div>
<div class="stuff">more text</div>
<div class="stuff">and more</div>
<div class="button">Click here</div>
<div class="this-is-your-game-over"></div>
</div>
You will notice there is also a class called button that triggers the zoom effect on the "game over" container. In your game development, you may choose another method to achieve this effect.
Essentially, the "game over" container will be positioned like so:
.this-is-your-game-over {
position:absolute;
height:0px;
width:0px;
background-color:blue;
right:0;
left:0;
bottom:0;
top:0;
margin: auto;
}
This ensures it is always centered, and through jQuery:
$(document).ready(function () {
$('.button').click(function () {
$('.this-is-your-game-over').toggleClass("this-is-your-game-over-ADDED");
});
});
By clicking the button, another class is added to the "game over" container, causing it to expand with a simple transition to your desired size:
.this-is-your-game-over-ADDED {
height:80%;
width:50%;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
Here is the FIDDLE to see everything in action
Important note: If the this-is-your-game-over div is not at the end of your HTML, you may need to assign a positive z-index to it.