JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div class="background">
   <div class="transbox">
     <p>Double click pour full screen !</p>
   </div>
</div>

CSS

div.background {
     background: url('http://www.freewebs.com/boogerts/Pure%20Pawnage.gif') no-repeat;
     border: 2px solid black;
     height:400px;
     position:relative;
 }
 
div.transbox {
     position:absolute;
     top: 30px;
     left:30px;
     right:30px;
     background-color: #ffffff;
     border: 1px solid black;
     opacity: 0.6;
     filter: alpha(opacity=60); /* For IE8 and earlier */
 }
 
div.transbox p {
     margin: 5%;
     font-weight: bold;
     color: #000000;
 }

JavaScript

$('document').ready(function(){
    $('.transbox').dblclick(function(){
        $('.background').css({
            'position':"absolute",
            'top':"0",
            'botom':"0",
            'left':"0",
            'right':"0",
            'height':"100%"
        });
        $('.transbox').hide(200);
    });
});