Images

They say a picture is worth a thousand words.... Let's put that to the test shall we?

Examples

Default Image

Images are responsive by default.

Image of earth
Default Default Image
<img src="../../img/earth1.jpg" alt="Image of earth">

Thumbnail Images

By default the thumbnail images have a maximum width of 15rem (150px).

Image of earth Image of earth Image of earth Image of earth Image of earth Image of earth Image of earth Image of earth
Default Thumbnail Images
<div class="thumbnails">
    <img class="img-thumbnail" src="../../img/earth1.jpg" alt="Image of earth">
    <img class="img-thumbnail" src="../../img/earth1.jpg" alt="Image of earth">
    <img class="img-thumbnail" src="../../img/earth1.jpg" alt="Image of earth">
    <img class="img-thumbnail" src="../../img/earth1.jpg" alt="Image of earth">
    <img class="img-thumbnail" src="../../img/earth1.jpg" alt="Image of earth">
    <img class="img-thumbnail" src="../../img/earth1.jpg" alt="Image of earth">
    <img class="img-thumbnail" src="../../img/earth1.jpg" alt="Image of earth">
    <img class="img-thumbnail" src="../../img/earth1.jpg" alt="Image of earth">
</div>

Avatar Images

By default the avatar images have a width of 8rem (80px) and a border radius of 50%.

Image of hand Image of hand Image of hand Image of hand Image of hand Image of hand Image of hand Image of hand
Default Avatar Images
<div class="thumbnails">
    <img class="img-avatar" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-avatar" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-avatar" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-avatar" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-avatar" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-avatar" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-avatar" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-avatar" src="../../img/hand.jpg" alt="Image of hand">
</div>

Zoom Out Images

When you hover over these images they will scale to 1.5 times the size of the image. By default they have a maximum width of 15rem (150px).

Image of hand Image of hand Image of hand Image of hand Image of hand Image of hand Image of hand Image of hand
Default Zoom Out Images
<div class="thumbnails">
    <img class="img-zoom" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-zoom" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-zoom" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-zoom" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-zoom" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-zoom" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-zoom" src="../../img/hand.jpg" alt="Image of hand">
    <img class="img-zoom" src="../../img/hand.jpg" alt="Image of hand">
</div>

Image Gallery

If you want to show off those fancy products of your's then why not use this simple image gallery?

Default Image Gallery
<div class="image-gallery">
	<img class="image-gallery-main" src="../../img/hand.jpg" alt="Image of hand">
	<img src="../../img/earth1.jpg" alt="Image of earth">
	<img src="../../img/hand.jpg" alt="Image of hand">
	<img src="../../img/earth1.jpg" alt="Image of earth">
	<img src="../../img/hand.jpg" alt="Image of hand">
	<img src="../../img/earth1.jpg" alt="Image of earth">
	<img src="../../img/hand.jpg" alt="Image of hand">
	<img src="../../img/earth1.jpg" alt="Image of earth">
	<img src="../../img/hand.jpg" alt="Image of hand">
</div>

Slide Show

A simple slide show to show off your well deserved testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est libero quaerat a ratione impedit temporibus at, accusamus cum dolor nesciunt vero! Vero ipsa obcaecati maxime, nam distinctio quam ab tempore.

- Ronald Duck, Owner of Rudolph

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis temporibus dolores provident in vel voluptatibus minima ullam est facere et, debitis obcaecati adipisci quis, iusto, sapiente consectetur omnis.

- Mary Mouse, Owner of Pluto

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque recusandae eveniet sunt in cupiditate illo ad blanditiis labore aliquam beatae, nemo aut odit. Qui mollitia fugiat unde, assumenda quam autem.

- Carol Smiley, Owner of Churchill
Default Slide Show
<div class="slideshow">
	<div class="slide">
		<img src="../../img/earth1.jpg" alt="">
		<p class="slide-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est libero quaerat a ratione impedit temporibus at, accusamus cum dolor nesciunt vero! Vero ipsa obcaecati maxime, nam distinctio quam ab tempore.</p>
		<small>- Ronald Duck, Owner of Rudolph</small>
	</div>
	<div class="slide">
		<img src="../../img/hand.jpg" alt="">
		<p class="slide-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis temporibus dolores provident in vel voluptatibus minima ullam est facere et, debitis obcaecati adipisci quis, iusto, sapiente consectetur omnis.</p>
		<small>- Mary Mouse, Owner of Pluto</small>
	</div>
	<div class="slide">
		<img src="../../img/earth1.jpg" alt="">
		<p class="slide-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque recusandae eveniet sunt in cupiditate illo ad blanditiis labore aliquam beatae, nemo aut odit. Qui mollitia fugiat unde, assumenda quam autem.</p>
		<small>- Carol Smiley, Owner of Churchill</small>
	</div>
	<div>
		<span class="slide-dot"></span> 
		<span class="slide-dot"></span> 
		<span class="slide-dot"></span> 
	</div>
</div>