Images

Responsive images

Photographer: @chummy

<img class="responsive" alt="Defoliation" src="/images/defoliation.jpeg" />

Image shapes

Photographer: @lxneng @kaka @miclle

<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" />

Fluid images

Photographer: @chummy

<img class="fluid" alt="Defoliation" src="/images/b62a0a54fbed94d91e3d66328b783a811b47.jpeg" />

Disabled images

Photographer: @chummy

<img class="disabled responsive" alt="Defoliation" src="/images/b62a0a54fbed94d91e3d66328b783a811b47.jpeg" />

Thumbnail Captions

Simple Caption

<div class="thumbnail">
  <img src="/images/b2df5944204470358e5e8ea086a16a2b8e1c.jpeg" />
  <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.

Simple Caption

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="xxx.jpg" />
  <div class="caption">Simple Caption</div>
</div>

<div class="thumbnail full">
  <img src="xxx.jpg" />
  <div class="caption">...</div>
</div>

<div class="thumbnail fade">
  <img src="xxx.jpg" />
  <div class="caption">...</div>
</div>

<div class="thumbnail slide">
  <img src="xxx.jpg" />
  <div class="caption">...</div>
</div>

<div class="thumbnail rotate">
  <img src="xxx.jpg" />
  <div class="caption">...</div>
</div>

<div class="thumbnail scale">
  <img src="xxx.jpg" />
  <div class="caption">...</div>
</div>