<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="myModal" class="modal bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><img src="http://www.jnvs.in/images/rope.png" alt="rope"></span></button> <div class="modal-content"> <div class="left-animation"> </div> <div class="right-animation"> </div> <div class="welcome"> Welcome To <br> Jawahar Navodaya Vidyalaya Samiti <br> Inaugurated by Honourable Minister <br> <b>Shri Prakash Javadekar </b><br> <button type="button" class="close btn btn-primary enter" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"> Enter Website</button> </div> </div> </div> </div>

.modal { display:block;} .modal-lg button.close { z-index: 999; background: transparent; position:absolute; top: 0px; right: 30px; opacity:0.8; } .modal-lg { position:relative; width:100%; height:100%; margin:0 !important; } .modal-open .modal { background:#fff; } .modal-content { width:100%; height:100%; box-shadow:none; border:none; text-align:center; } .welcome { color:#073881; text-align:center; font-size:20px; padding-top:5%; } .left-animation, .right-animation { position:absolute; top:0; left:0; background: url(http://www.jnvs.in/images/intro.jpg) no-repeat center center; background-size: cover; width:50%; height:100%; animation: left-animation 3s 3s ease-in forwards; } .right-animation { left:auto; right:0; animation: right-animation 3s 3s ease-in forwards; } @keyframes left-animation { 0%{ width:50%; } 100%{ width:10%; } } @keyframes right-animation { 0%{ width:50%; } 100%{ width:10%; } } .enter { color: #f33 !important; position: absolute !important; top: 85% !important; left: 50%; z-index: 1 !important; width: 120px; margin-left: -67px; }