How to Add Caption to Images

How to Add Caption to Images

These image captions provide extra information about the images displayed on the webpages.you can quickly add these types caption over images using css and html.

Note:
Please create image folder and place your images on it.Change image link depend on your image.

Source code

<!DOCTYPE html>
<html>
<head>
<title>Image Caption</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="mainwrapper">


<div id="box-1" class="box">
<img id="image-1" src="images/7wonders.jpg"/>

<span class="caption simple-caption">
<p>History Archives</p>
</span>
</div>

<div id="box-2" class="box">
<img id="image-2" src="images/Christ-Redeemer1.jpg" />

<span class="caption full-caption">
<h3> Rio de Janeiro, Brazil</h3>
<p>This statue of Jesus stands some 38 meters tall, atop the Corcovado mountain overlooking Rio de Janeiro.</p>
</span>
</div>

<div id="box-3" class="box">
<img id="image-3" src="images/Great-Wall.jpg" />
<span class="caption fade-caption">

<h3>Great Wall of China</h3>
<p>The Great Wall of China was built to link existing fortifications into a united defense system and better keep invading Mongol tribes out of China.</p>
</span>
</div>

<div id="box-4" class="box">
<img id="image-4" src="images/Machu-Picchu.jpg" />
<span class="caption slide-caption">
<h3>Machu Picchu</h3>
<p>In the 15th century, the Incan Emperor Pachacútec built a city in the clouds on the mountain known as Machu Picchu (“old mountain”). </p>
</span>
</div>

<div id="box-5" class="box">
<div class="rotate">
<img id="image-5" src="images/Petra1.jpg" />
<span class="caption rotate-caption">

<h3>Petra: Jordan</h3>
<p>On the edge of the Arabian Desert, Petra was the glittering capital of the Nabataean empire of King Aretas IV (9 B.C. to 40 A.D.). </p>
</span>
</div>
</div>

<div id="box-6" class="box">
<img id="image-6" src="images/Taj-Mahal1.jpg" />
<span class="caption scale-caption">
<h3>Taj Mahal: Agra, India</h3>

<p>This immense mausoleum was built on the orders of Shah Jahan, the fifth Muslim Mogul emperor, to honor the memory of his beloved late wife. </p>
</span>
</div>
</div>
</body>
</html>

Cascading Style Sheets (CSS)

style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

h1 {
/*18px via Fonts CSS foundation*/
font-size:138.5%;
}
h2 {
/*16px via Fonts CSS foundation*/
font-size:123.1%;
}
h3 {
/*14px via Fonts CSS foundation*/
font-size:108%;
}
h1,h2,h3 {
/* top & bottom margin based on font size */
margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
/*bringing boldness back to headers and the strong element*/
font-weight:bold;
}
abbr,acronym {
/*indicating to users that more info is available */
border-bottom:1px dotted #000;
cursor:help;
}
em {
/*bringing italics back to the em element*/
font-style:italic;
}
blockquote,ul,ol,dl {
/*giving blockquotes and lists room to breath*/
margin:1em;
}
ol,ul,dl {
/*bringing lists on to the page with breathing room */
margin-left:2em;
}
ol li {
/*giving OL's LIs generated numbers*/
list-style: decimal outside;
}
ul li {
/*giving UL's LIs generated disc markers*/
list-style: disc outside;
}
dl dd {
/*giving UL's LIs generated numbers*/
margin-left:1em;
}
th,td {
/*borders and padding to make the table readable*/
border:1px solid #000;
padding:.5em;
}
th {
/*distinguishing table headers from data cells*/
font-weight:bold;
text-align:center;
}
caption {
/*coordinated marking to match cell's padding*/
margin-bottom:.5em;
/*centered so it doesn't blend in to other content*/
text-align:center;
}
p,fieldset,table {
/*so things don't run into each other*/
margin-bottom:1em;
}

/* Style */
html { background-image:url('images/bg.png')}

#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0 auto;
text-align: center;
width: 660px;
}

/* Image Box Style */
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 300px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

/* Caption Common Style */
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}

/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 30px;
width: 300px;
display: block;
bottom: -30px;
line-height: 25pt;
text-align: center;
}

/** Caption 2: Full Width & Height **/
#mainwrapper .box .full-caption {
width: 300px;
height: 170px;
top: -200px;
text-align: left;
padding: 15px;
}

/** Caption 3: Fade **/
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
opacity: 0;
width: 300px;
height: 170px;
text-align: left;
padding: 15px;
}

/** Caption 4: Slide **/
#mainwrapper .box .slide-caption {
width: 300px;
height: 170px;
text-align: left;
padding: 15px;
left: 320px;
}

/** Caption 5: Rotate **/
#mainwrapper #box-5.box .rotate-caption {
width: 300px;
height: 170px;
text-align: left;
padding: 15px;
top: 200px;
left:-20px;
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}

#mainwrapper .box .rotate {
width: 300px;
height: 400px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

/** Caption 6: Scale **/
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {
position: relative;
left: -200px;
width: 170px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

#mainwrapper .box .scale-caption h3 {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-o-transition-delay: 300ms;
-ms-transition-delay: 300ms;
transition-delay: 300ms;
}

#mainwrapper .box .scale-caption p {
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-o-transition-delay: 500ms;
-ms-transition-delay: 500ms;
transition-delay: 500ms;
}

/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}

/** Full Caption :hover Behaviour **/
#mainwrapper .box:hover .full-caption {
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
opacity: 1;
transform: translateY(100%);
}

/** Fade Caption :hover Behaviour **/
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption {
opacity: 1;
}

/** Slide Caption :hover Behaviour **/
#mainwrapper .box:hover .slide-caption {
background-color: rgba(0,0,0,1) !important;
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
opacity: 1;
transform: translateX(-100%);
}
#mainwrapper .box:hover img#image-4 {
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 1;
}

/** Rotate Caption :hover Behaviour **/
#mainwrapper .box:hover .rotate {
background-color: rgba(0,0,0,1) !important;
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}

/** Scale Caption :hover Behaviour **/
#mainwrapper .box:hover #image-6 {
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}

#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p {
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
-webkit-transform: translateX(200px);
transform: translateX(200px);
}

Output

Figure:When your mouse pointer hover on image it show caption about that image.