SOURCE

document.getElementById('paper-flip').addEventListener("click",function(e){
		  if(e.target.className=="btn-close"){
		    this.className = "paper-flip";
		  } else {
		    this.className = "paper-flip folded";
		  }
		});

<div class="paper-flip" id="paper-flip">

	  <div class="share-layer">
	    <div class="btn-wrap">
	      <a class="btn btn-facebook">FaceBook</a>
	      <a class="btn btn-twitter">Twitter</a>
	      <a class="btn btn-google">Google +</a>
	    </div>
	    <span class="btn-close">×</span>
	  </div>

	  <div class="image-layer" id="image-layer">
	    <img  src="http://p6.qhimg.com/d/inn/3f563406/table.jpg" alt="">
	  </div>

	</div>

		body {
			background-color: #eaf0f2;
		}
		h1{
			font-size: 14px;
			font-family: "Microsoft Yahei";
			text-align: center;
		}
		.paper-flip {
		  position: relative;
		  width: 500px;
		  height: 300px;
		  margin: 0 auto;
		}

		.share-layer {
		  position: absolute;
		  left: 0;
		  top: 50px;
		  width: 500px;
		  height: 300px;
		  background-color: #fff;
		  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
      opacity:0;
		}

		.btn-wrap {
		  pointer-events: none;
		  opacity: 0;
		  text-align: center;
		  margin-top: 140px;
		  text-align: center;
		}

		.btn {
		  padding: 10px;
		  border-radius: 2px;
		  color: #fff;
		  display: inline-block;
		}

		.btn-facebook {
		  background-color: #3b5998;
		}

		.btn-twitter {
		  background-color: #00aced;
		  margin: 0 20px;
		}
		.btn-google {
		  background-color: #d34836;
		}

		.btn-close {
		  pointer-events: none;
		  position: absolute;
		  right: 15px;
		  top: 10px;
		  color: rgba(0,0,0,0.3);
		  font-size: 20px;
		  z-index: 11;
		  opacity: 0;
		  cursor: default;
		}

		.paper-flip.folded .btn-close {
		  transition: 0.4s;
		  transition-delay: 0.6s;
		  opacity:1;
		  cursor: pointer;
		  pointer-events: initial;
		}

		.paper-flip.folded .btn-wrap{
		  opacity: 1;
		  transition: all 1s;
		  pointer-events: initial;
		}

		.paper-flip.folded .share-layer {
		  z-index: 1;
      top:0px;
		  transition: all 0.5s;
      transition-delay: 0.1s;
      opacity:1;
		}

		/*image-layer*/
		.image-layer {
		  width: 500px;
		  height: 300px;
		  overflow: hidden;
		  position: absolute;
		  top: 0;
		  left: 0;
		}

		.image-layer img {
		  width: 500px;
		  cursor: pointer;
		}

		.image-layer:before {
		  content: '';
		  position: absolute;
		  top: 0;
		  right: 0;
		  border-style: solid;
		  border-width: 0;
		  border-color: rgba(0,0,0,0.2) #fff;
		  border-radius: 0 0 0 4px;
		  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
		  -webkit-transition: all 0.4s ease-out;
		  transition:all 0.4s ease-out;
		}

		.image-layer:hover:before{
		  border-right-width:80px;
		  border-bottom-width:80px;
		}

		.paper-flip.folded .image-layer:before{
		  border-right-width:1000px;
		  border-bottom-width:600px;
      transition:0.5s;
		}