/*
Book Hover
https://codepen.io/dillenverschoor/pen/xxPYOLB

Pure CSS Book Hover Animation
https://codepen.io/akccakcctw/pen/BzReje
*/

.img_div {
  padding: 5px;
  margin: 20px auto 0;
  position: relative;
  /*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2P8/////w8fPjAICAgwwGhGGggCAOYAMfLhHG5wAAAAAElFTkSuQmCC);*/
  background-size: 50% 50%;
  border-radius: 4px;
}

.img_div::before {
  content: "";
  width: 2px;
  margin-left: 8px;
  height: 94%;
  display: block;
  position: absolute;
  z-index: 999;
  border-left: 2px solid #00000010;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
  transition: all .5s ease;
}

.img_div::after {
  content: "";
  position: absolute;
  display: block;
  /* top: -54px; */
  top: 5px;
  right: 3px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2P8/////w8fPjAICAgwwGhGGggCAOYAMfLhHG5wAAAAAElFTkSuQmCC) repeat;
  width: 4px;
  height: 94%;
  z-index: -1;
  transform: rotateY(35deg);
  transform-origin: right;
  transition: all 500ms;
}

.img_div img {
  transition: 1s cubic-bezier(0.25, 1, 0.5, 1);
  transform: rotate(0);
  transform-origin: left;
  border-radius: 4px;
  box-shadow: 0 4px 2px -2px gray;
}

.img_div:hover img {
  cursor: pointer;
  box-shadow: 20px 10px 50px rgba(0, 0, 0, 0.4);
  transform: rotateY(-20deg);
}

.img_div:hover::before {
  margin-left: 6px;
  transition: all .5s cubic-bezier(0.25, 1, 0.5, 1);
}

.img_div:hover:after {
  right: 2px;
  width: 15px;
}


/*.light {
  width: 90%;
  height: 100%;
  position: absolute;
  border-radius: 3px; 
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
  top: 0;
  right:0;
  opacity: .1;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
}*/