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="https://via.placeholder.com/640x400" id="myImage" alt=""></div>

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

Image Options

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

Source Code

<figure class="overlay">  <img src="https://via.placeholder.com/800" 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