<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="curtain"> <div class="curtain__wrapper"> <input type="checkbox" checked> <div class="curtain__panel curtain__panel--left"> </div> <div class="curtain__prize"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/trophy.svg"> </div> <div class="curtain__panel curtain__panel--right"> </div> </div> </div>

/*////////////////////Opening Effect////////////////////*/ .curtain { width: 100%; height: 100vh; overflow: hidden; } .curtain__wrapper { width: 100%; height: 100%; } .curtain__panel { background: orange; width: 50%; height: 100vh; float: left; position: relative; z-index: 2; transition: all 1s ease-out; } .curtain__panel--left { transform: translateX(-100%); } .curtain__panel--right { transform: translateX(100%); } .curtain__prize { background: #333; position: absolute; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .curtain input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 100; opacity: 0; } .curtain input[type=checkbox]:checked ~ div.curtain__panel--left { transform: translateX(0); } .curtain input[type=checkbox]:checked ~ div.curtain__panel--right { transform: translateX(0); } .curtain img { width: 55vw; height: 55vh; }