<div class='card pep'><img width="100%" height="100%" src="https://wallpapercave.com/dwp2x/qQFVbH1.jpg" ></div>



<div class='card'><img width="100%" height="100%" src="https://icdn.lenta.ru/images/2019/09/09/20/20190909201820358/pwa_list_rect_768_d8b758583f004390cc0f8c4e9ab60508.jpg" ></div>

<div class='card pepsi'><img width="100%" height="100%" src="https://wallpapercave.com/dwp2x/BsxCRkZ.jpg" ></div>

<div class='card pepsii'><img width="100%" height="100%" src="https://newizv.ru/attachments/3e2a97902a0ed5c1df5baed0f814a1ffa32cd94f/store/fill/1200/675/482f3a35b54a945698b3c8fcd846796c7c46272a99fb320dbbb751b05ebd/11.jpg" ></div>

<div class='card pepsiii'><img width="100%" height="100%" src="https://prod.static9.net.au/_/media/2018/09/11/10/55/110918septelevengallery13.jpg" ></div>



<canvas id="particle-canvas"></canvas>
.card {
  width: 330px;
  height: 240px;
  position: fixed;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
  z-index: 999;
  margin-top: -100px;
  margin-left: 200px;
  top: 50%;
  left: 50%;
}

img {
	border-radius:20px;
}

.card:hover {
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
  z-index:555555 !important;
}

.card.pep {
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform:  rotate(-13deg);
  z-index: 0;
  margin-top: -280px;
  margin-left: 280px;
}

.card.pepsi {
  margin-top: 100px;
  margin-left: 100px;
  transform:  rotate(-5deg);
  z-index: 0;
}

.card.pepsii {
  margin-top: -360px;
  margin-left: -100px;
  transform:  rotate(-3deg);
  z-index: 100;
}

.card.pepsiii {
  margin-top: -130px;
  margin-left: -50px;
  transform:  rotate(10deg);
  z-index: 100;
}




html, body {
  margin: 0;
}

#particle-canvas {
  width: 100%;
  height: 100vh;
  background-color: #454545;
}
$('.card').pep({
  deferPlacement: true,
  removeMargins: false,
  droppable: '.drop-target',
  overlapFunction: false,
  useCSSTranslation: false,
  start: function(ev, obj){
  obj.noCenter = false;
  },
  drag: function(ev, obj){
  var vel = obj.velocity();
    var rot = (vel.x)/15;
    rotate(obj.$el, rot)
  },
  stop: function(ev, obj){
    handleCentering(ev, obj);
//    rotate(obj.$el, 0)
  },
  rest: handleCentering
})

function handleCentering(ev, obj){
  if ( obj.activeDropRegions.length > 0 ) {
    centerWithin(obj);
  }   
}

function centerWithin(obj){
  var $parent = obj.activeDropRegions[0];
  var pTop    = $parent.position().top;
  var pLeft   = $parent.position().left;
  var pHeight = $parent.outerHeight();
  var pWidth  = $parent.outerWidth();

  var oTop    = obj.$el.position().top;
  var oLeft   = obj.$el.position().left;
  var oHeight = obj.$el.outerHeight();
  var oWidth  = obj.$el.outerWidth();

  var cTop    = pTop + (pHeight/2);
  var cLeft   = pLeft + (pWidth/2);

  if ( !obj.noCenter ) {
    if ( !obj.shouldUseCSSTranslation() ) {
      var moveTop = cTop - (oHeight/2);
      var moveLeft = cLeft - (oWidth/2);
      obj.$el.animate({ top: moveTop, left: moveLeft }, 50);
    } else{
      var moveTop   = (cTop - oTop) - oHeight/2;
      var moveLeft  = (cLeft - oLeft) - oWidth/2;

      obj.moveToUsingTransforms( moveTop, moveLeft );
    }

    obj.noCenter = true;
    return;
  }

  obj.noCenter = false;
}

function rotate($obj, deg){
  $obj.css({ 
      "-webkit-transform": "rotate("+ deg +"deg)",
         "-moz-transform": "rotate("+ deg +"deg)",
          "-ms-transform": "rotate("+ deg +"deg)",
           "-o-transform": "rotate("+ deg +"deg)",
              "transform": "rotate("+ deg +"deg)" 
    }); 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://rawgithub.com/briangonzalez/jquery.pep.js/master/src/jquery.pep.js