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.