Images
Responsive images
<img class="responsive" src="/images/defoliation.jpeg" alt="Defoliation" />
<div>
Photographer:
<a target="_blank" href="http://miclle.com/photo/41">
<small>@chummy</small>
</a>
</div>Image shapes
<img
class="rounded"
alt="Rounded"
src="/images/b2df5944204470358e5e8ea086a16a2b8e1c.jpeg"
/>
<img
class="circle"
alt="Circle"
src="/images/f78d490e23e56501adda00c7876037aef422.jpeg"
/>
<img
class="thumbnail"
alt="Thumbnail"
src="/images/3a4b2132cdefc03527223d707a6a5ce6bffc.jpeg"
/>
<div>
Photographer:
<a target="_blank" href="http://miclle.com/photo/34">
<small>@lxneng</small>
</a>
<a target="_blank" href="http://miclle.com/photo/28"><small>@kaka</small></a>
<a target="_blank" href="http://miclle.com/photo/1"><small>@miclle</small></a>
</div>Fluid images
<img
class="fluid"
src="/images/b62a0a54fbed94d91e3d66328b783a811b47.jpeg"
alt="Defoliation"
/>
<div>
Photographer:
<a target="_blank" href="http://miclle.com/photo/41">
<small>@chummy</small>
</a>
</div>Disabled images
<img
class="disabled responsive"
src="/images/b62a0a54fbed94d91e3d66328b783a811b47.jpeg"
alt="Defoliation"
/>
<div>
Photographer:
<a target="_blank" href="http://miclle.com/photo/41">
<small>@chummy</small>
</a>
</div>Thumbnail Captions
<div class="thumbnail">
<img src="/images/b2df5944204470358e5e8ea086a16a2b8e1c.jpeg" alt="" />
<div class="caption">Simple Caption</div>
</div>Animation effect
Say good bye to jQuery plugins. Today, we can create similar image caption effect only with CSS3. This demo shows how this effects runs.
Full Caption
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Fade Caption
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Slide Caption
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
This is rotate caption
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Scale Caption
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div class="thumbnail simple">
<img src="/images/b2df5944204470358e5e8ea086a16a2b8e1c.jpeg" alt="" />
<div class="caption">Simple Caption</div>
</div>
<div class="thumbnail full">
<img src="/images/f78d490e23e56501adda00c7876037aef422.jpeg" alt="" />
<div class="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>
</div>
</div>
<div class="thumbnail fade">
<img src="/images/3a4b2132cdefc03527223d707a6a5ce6bffc.jpeg" alt="" />
<div class="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>
</div>
</div>
<div class="thumbnail slide">
<img src="/images/2gyvxv7un50t1ugzlekekp7femlfyjw9jsyt.jpeg" alt="" />
<div class="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>
</div>
</div>
<div class="thumbnail rotate">
<img src="/images/57vtufdyzphay5b72oqkx1v1jaf9c0ij3m5t.jpeg" alt="" />
<div class="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>
</div>
</div>
<div class="thumbnail scale">
<img src="/images/e3d0b7199492261ba8991f3d9cd7b30f5f3c.jpeg" alt="" />
<div class="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>
</div>
</div>