Images

Root  /  Shortcodes  /  Images

Images

Add classes to an <img> element to easily style images in any project.

Cross-browser compatibility

Keep in mind that Internet Explorer 8 lacks support for rounded corners.

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Responsive images

Looking for how to make images more responsive? Check out the responsive images section up top.

CSS3 Animation Image

Image effects Image effects Image effects Image effects

CSS3 Team Image

Chameleon

by DNNSkin.Net

View on dnnstore

<div class="preff">
<div class="eitem">
<img src="/portals/31/team1.png" />
<div class="re-info">
<h3>Brainiac</h3>
<p>by Daniel Nyari></p>
<a href="#">View on Dribbble</a>
</div>
</div>
</div>
Planar Client Options
Layout Style
  • Wide
  • Boxed
Theme Preview