Image Overlay Preloader using DIV in CSS

Submitted by rinvizle on Tuesday, August 9, 2016 - 16:55.

In this tutorial, we will create a Image Overlay Preloader Using DIV In CSS. It provides a friendly user interface using Bootstrap and CSS. We create a CSS snippet for displaying a preloader over div content. And its not only for the list of content, you can use it for every case where you want to overlay something on the content. Overlaying image on div is a most used featured. To fetch the content server takes some time and user does not understand what happening behind the scene. So, if you display a loading image over the content list, it will helpful for the user to understand the data loading process. See the example code below.

Sample Code

Index.html - is the html form for the design for the web page and for the content of the resources.

<!DOCTYPE>
<html>
<head>
<title>Image Overlay Preloader Using DIV In CSS</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <script src="js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script> 
</head>
<body>
<nav class="navbar navbar-inverse">
        <div class="container-fluid">
                <ul class="nav navbar-nav">
                        <li><a href="http://www.sourcecodester.com"><b>Sourcecodester</b></a></li>
                        <li class="active"><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JAVASCRIPT</a></li>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">SQL</a></li>
                </ul>
        </div>
</nav><br/><br/><br/><br/>
<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">
                <h4>You're Future Is Created By What You Do Today, Not Tomorrow.</h4>
                <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">
                <h4>Learn and Earn.</h4><br>
                <img src="images/img1.jpg" class="img-circle" alt="Learn and Earn" width="304" height="236">
        </div>
        <div class="col-span">
                <h4>Men In The City.</h4><br>
                <img src="images/img2.jpg" class="img-thumbnail" alt="Men In The City" width="304" height="236">
        </div>
</div>
</body>
</html>

Style.css - And this script is for the loading/preloader of the images or for the content to think that the background content is in the process.

.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;
}

Hope that you like my tutorial. And don't forget to Like and Share this to your friends. Enjoy Coding.

Add new comment

182 views