Images

Responsive images

Photographer: @chummy

<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

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

Photographer: @chummy

<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

Photographer: @chummy

<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

Simple Caption

<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.

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