<div class="main-content">
  <h1> Books Animation<small>Hover on any book...</small></h1>
  <div class="wrapper">
    <div class="book">
      <div class="book__cover" style="background-image:url('https://1.bp.blogspot.com/-D2I5IQPi4Os/XOsemT2JokI/AAAAAAAAAjU/yhsbsPjfjl8cIrb41SeYW75RYxSz7t-GwCPcBGAYYCw/s320/%25E3%2582%25B2%25E3%2583%25BC%25E3%2583%259E%25E3%2583%25BC%25E3%2582%25BA%2521%2B-%2Bvol%2B8.jpg');">
        <div class="book__detail">Gamers! - Vol.8</div>
      </div>
      <div class="book__page"></div>
    </div>
    <h4>Plain</h4>
  </div>
  <div class="wrapper">
    <div class="book">
      <div class="book__cover" style="background-image:url('https://magnavalon.files.wordpress.com/2017/11/dpjmugm.jpg?w=648');">
        <div class="book__detail">Gamers! - Vol.9</div>
      </div>
      <div class="book__page ruled"></div>
    </div>
    <h4>Ruled</h4>
  </div>
  <div class="wrapper">
    <div class="book">
      <div class="book__cover" style="background-image:url('https://1.bp.blogspot.com/-HHNDpcYvzb4/WeKLtdDjRoI/AAAAAAAAMCQ/RkqgzKj-Y684yxf_z9TFo2YueqiszIh8ACLcBGAs/s1600/Gamers%2Bvolumen%2B6%2Ben%2Bespa%25C3%25B1ol.png');">
        <div class="book__detail">Gamers! - Vol.6</div>
      </div>
      <div class="book__page squared"></div>
    </div>
    <h4>Squared</h4>
  </div>
  <div class="wrapper">
    <div class="book">
      <div class="book__cover" style="background-image:url('https://cdn.novelupdates.com/images/2016/11/Gamers.jpg');">
        <div class="book__detail">Gamers! - Vol.1</div>
      </div>
      <div class="book__page dotted"></div>
    </div>
    <h4>Dotted</h4>
  </div>
</div>

body {
  background: #fff;
  color: #222;
  font-family: 'Quicksand', sans-serif;
  font-size: 18px;
}

.main-content {
  margin: 2.5em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

h1 {
  width: 100%;
  margin: 0 auto 0.5em;
  font-size: 30px;
  small {
    text-transform: none;
    display: block;
    margin: 16px 0;
    font: 300 20px 'QuickSand', sans-serif;
    color: #999;
  }
}

.wrapper {
  max-width: calc(100% / 4);
  min-width: 10em;
}
.book {
  height: 250px;
  width: 175px;
  position: relative;
  transition: .4s ease-in-out;
  border-radius: 5px 15px 15px 5px;
  transform-origin: left center 0px;
  display: inline-block;
  margin: 32px;
  perspective: 800px;
  &:hover {
    // Change to make others effects
    transform: rotateZ(-8deg);
    .book__cover {
      transform: rotateY(-40deg);
      z-index: 999;
      box-shadow: 20px 10px 50px rgba(0,0,0,0.2);
    }
  }
  
  &__cover {
    height: 250px;
    width: 175px;
    position: absolute;
    border-radius: 5px 15px 15px 5px;
    box-shadow: 0 0 5px 1.5px rgba(0, 0, 0, 0.25);
    z-index: 10;
    transition: .5s linear;
    transform-style: preserve-3d;
    transform-origin: left center 0px;
    background-size: 180px 255px;
  }
  
  &__detail {
    background-color: rgba(51, 51, 51, 0.8);
    margin-top: 185px;
    padding: 15px;
    font-size: 12px;
    font-weight: 800;
    position: relative;
    z-index: 10;
    color: #fff;
    text-align: left;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  }
  
  &__page {
    height: 100%;
    width: 175px;
    position: absolute;
    background-color: #fbfae8;
    z-index: 0;
    box-shadow: 0 0 5px 1.5px rgba(0, 0, 0, 0.25);
    border-radius: 5px 16px 16px 5px;
    overflow: hidden;
    &.ruled {
      background: linear-gradient(to bottom, #fbfae8 9px, #e4e4e4 1px);
      background-size: 100% 10px;
    }
    &.squared {
          background-image: linear-gradient(#e4e4e4 1px, transparent 1px), linear-gradient(90deg, #e4e4e4 1px, transparent 1px);
      background-size: 10px 10px, 10px 10px, 2px 2px, 2px 2px;
    }
    &.dotted {
          background: linear-gradient(90deg, #fbfae8 10px, transparent 1%) center, linear-gradient(#fbfae8 10px, transparent 1%) center, #999;
      background-size: 11px 11px;
    }
  }
  
}