Image Shapes

A rounded, circle or thumbnail image

Source Code

<img src="../img/img11.jpg" class="img-fluid" alt=""> <img src="../img/img11.jpg" class="img-fluid rounded" alt=""> <img src="../img/img11.jpg" class="img-fluid rounded-circle" alt=""> <img src="../img/img11.jpg" class="img-fluid img-thumbnail" alt="">

Image Cropper

Jcrop is the quick and easy way to add image cropping functionality to your web application.

Source Code

<link href="../lib/Jcrop/Jcrop.css" rel="stylesheet">

<img src="../img/img17.jpg" id="myImage" alt="">

$('#myImage').Jcrop({ setSelect: [ 100, 100, 300, 200 ] });

Image Options

An image with overlayed option at bottom center of an image.

Source Code

<figure class="overlay"> <img src="../img/img18.jpg" class="img-fluid" alt=""> <figcaption class="overlay-body d-flex align-items-end justify-content-center"> <div class="img-option"> <a href="#" class="img-option-link"><div><i class="icon ion-android-share-alt"></i></div></a> <a href="#" class="img-option-link"><div><i class="icon ion-ios-gear"></i></div></a> <a href="#" class="img-option-link"><div><i class="icon ion-images"></i></div></a> <a href="#" class="img-option-link"><div><i class="icon ion-ios-star"></i></div></a> </div> </figcaption> </figure>

Class Reference

Class	Description
class="img-option img-option-sm"	Set the image option to smaller.