Create that cool lifted corners 3-D effect on an image: `span>img`.

_lifted-corners.scss

//
// For a given html structure:
//
//   <span class="image"><img src="..."></span>
//
// Use this in your SCSS file:
//
//   .image {
//     @include lifted-corners()
//   }
//
// SASS mixin based on: https://codepen.io/ericthayer/pen/PZwJJm
//   
@mixin lifted-corners() {
  $_base_color: #777;
  $_shadow_color: rgba($_base_color, .7);

  // How many pixels down from bottom of image the shadow falls
  $_bottom: 13px;

  // The angle of the corners from bottom.
  $_rotation: 4deg;

  $_blur_radius: 15px;

  // Distance in from sides of the shadow corners.
  $_indent: 10px;

  overflow: visible;
  
  img {
    box-shadow: rgba($_base_color, .2) 0 0 5px;
  }
  
  &:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 25px - $_bottom;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: $_shadow_color;
    box-shadow: 0 15px $_blur_radius $_shadow_color;
    left: $_indent;
    transform: rotate(-1 * $_rotation);
  }
  
  &:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 25px - $_bottom;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: $_shadow_color;
    box-shadow: 0 15px $_blur_radius $_shadow_color;
    right: $_indent;
    transform: rotate($_rotation);
  }
}