Hardbound Cover

by varundhawan5792

HTML

<div class="bookshelf">
    <div class="book">
        <div class="cover">
            <img src="https://images-na.ssl-images-amazon.com/images/I/51-nXsSRfZL._SX328_BO1,204,203,200_.jpg">
        </div>
        <a class="link" href="https://www.amazon.in/Atomic-Habits-James-Clear/dp/1847941834/" target="_blank"></a>
    </div>
    <div class="book">
        <div class="cover">
            <img src="https://images-na.ssl-images-amazon.com/images/I/41SxL78DpvL._SX324_BO1,204,203,200_.jpg">
        </div>
        <a class="link" href="https://www.amazon.in/Lessons-21st-Century-Yuval-Harari/dp/1784708283/" target="_blank"></a>
    </div>
</div>

CSS

.bookshelf {
  margin: 40px;
  margin-bottom: 20px;
  text-align: center;
}
.bookshelf .book {
  width: 226px;
  height: 346px;
  display: inline-block;
  margin: 0 12px 20px;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.12);
  position: relative;
  vertical-align: top;
  transition: all ease-in-out 0.2s;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
}
@media screen and (max-width: 600px) {
  .bookshelf .book {
    width: 42vw;
    height: calc(1.53 * 42vw);
  }
}
.bookshelf .book:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  transform: scale(1.01);
}
.bookshelf .book .meta {
  position: absolute;
  bottom: 0;
  padding: 12px 16px;
  background: linear-gradient(
    0deg,
    rgba(2, 0, 36, 0.6) 0%,
    rgba(2, 0, 36, 0) 100%
  );
  color: #ffffff;
}
.bookshelf .book .meta .title {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.bookshelf .book .meta .author {
  font-size: 12px;
  opacity: 0.6;
}
.bookshelf .book .link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.02) 0%,
    rgba(0, 0, 0, 0.05) 0.75%,
    rgba(255, 255, 255, 0.5) 1%,
    rgba(255, 255, 255, 0.6) 1.3%,
    rgba(255, 255, 255, 0.5) 1.4%,
    rgba(255, 255, 255, 0.3) 1.5%,
    rgba(255, 255, 255, 0.3) 2.4%,
    rgba(0, 0, 0, 0.05) 2.7%,
    rgba(0, 0, 0, 0.05) 3.5%,
    rgba(255, 255, 255, 0.3) 4%,
    rgba(255, 255, 255, 0.3) 4.5%,
    rgba(244, 244, 244, 0.1) 5.4%,
    rgba(244, 244, 244, 0.1) 99%,
    rgba(144, 144, 144, 0.2) 100%
  );
  box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.12);
}
.bookshelf .book .cover {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
}
.bookshelf .book .cover img {
  min-width: 100%;
  min-height: 100%;
}