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

A simple jQuery image cropping plugin. https://github.com/fengyuanchen/cropperjs

Source Code

<link href="../lib/cropperjs/cropper.min.css" rel="stylesheet"> <script src="../lib/cropperjs/cropper.min.js"></script> <script src="../lib/jquery-cropper/jquery-cropper.min.js"></script>

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

var $image = $('#myImage'); $image.cropper({ aspectRatio: 16 / 9 }); // Get the Cropper.js instance after initialized var cropper = $image.data('cropper');

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.