<!DOCTYPE> <html> <head> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <ul class="nav navbar-nav"> </ul> </div> <div class="container" align="center"> <div class="overlay"> <div class="overlay-content"> <img src="images/loading.gif" alt="Loading..."/> </div> </div> <div class="col-span"> <img src="images/img.jpg" class="img-rounded" alt="You're Future Is Created By What You Do Today, Not Tomorrow" width="304" height="236"> </div> <div class="col-span"> <img src="images/img1.jpg" class="img-circle" alt="Learn and Earn" width="304" height="236"> </div> <div class="col-span"> <img src="images/img2.jpg" class="img-thumbnail" alt="Men In The City" width="304" height="236"> </div> </div> </body> </html>
.container{ position: relative; width:52%; } .overlay{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; background-color: rgba(255,255,255,0.8); } .overlay-content { position: absolute; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); top: 50%; left: 0; right: 0; text-align: center; color: #555; }