<!DOCTYPE html>
<html>
<head>
<title>Image Caption with CSS3</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="images/1.jpg"/>
<span class="caption simple-caption">
<p>Simple Caption</p>
</span>
</div>
<!-- Image Caption 2 -->
<div id="box-2" class="box">
<img id="image-2" src="images/2.jpg"/>
<span class="caption full-caption">
<h3>Full Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
<!-- Image Caption 3 -->
<div id="box-3" class="box">
<img id="image-3" src="images/3.jpg"/>
<span class="caption fade-caption">
<h3>Fade Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
<!-- Image Caption 4 -->
<div id="box-4" class="box">
<img id="image-4" src="images/4.jpg"/>
<span class="caption slide-caption">
<h3>Slide Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
<!-- Image Caption 5 -->
<div id="box-5" class="box">
<div class="rotate">
<img id="image-5" src="images/5.jpg"/>
<span class="caption rotate-caption">
<h3>This is rotate caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
<!-- Image Caption 6 -->
<div id="box-6" class="box">
<img id="image-6" src="images/6.jpg"/>
<span class="caption scale-caption">
<h3>Scale Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
</body>
</html>
