Musso
Anime Quizmaster
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
200 XP
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.
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.
Hope that you like my tutorial. And don't forget to Like and Share this to your friends. Enjoy Coding.
Download
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.
Download
You must upgrade your account or reply in the thread to view hidden text.