HTML

<div class="folder">
  <div class="folder__back">
    <div class="paper"></div>
    <div class="paper"></div>
    <div class="paper"></div>
    <div class="folder__front"></div>
    <div class="folder__front right"></div>
  </div>
</div>

CSS

body{display:flex;margin:0;padding:0;width:100%;height:100vh;background:#1f1f1f;justify-content:center;align-items:center;}
.folder{transition:all .2s ease-in;}
.folder__back{position:relative;width:100px;height:80px;border-radius:0 5px 5px 5px;background:#4786ff;}
.folder__back:after{position:absolute;bottom:98%;left:0;width:30px;height:10px;border-radius:5px 5px 0 0;background:#4786ff;content:"";}
.folder__back .paper{position:absolute;bottom:10%;left:50%;width:70%;height:80%;border-radius:5px;background:#e6e6e6;transition:all .3s ease-in-out;transform:translate(-50%,10%);}
.folder__back .paper:nth-child(2){width:80%;height:70%;background:#f2f2f2;}
.folder__back .paper:nth-child(3){width:90%;height:60%;background:#fff;}
.folder__back .folder__front{position:absolute;width:100%;height:100%;border-radius:5px;background:#70a1ff;transition:all .3s ease-in-out;transform-origin:bottom;}
.folder:hover{transform:translateY(-8px);}
.folder:hover .paper{transform:translate(-50%);}
.folder:hover .folder__front{transform:skew(15deg) scaleY(.6);}
.folder:hover .right{transform:skew(-15deg) scaleY(.6);}