@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');
  @import url('https://fonts.googleapis.com/css?family=Montserrat:300&display=swap');
  @import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap');
  .product-Card-img {
      top: 12%;
      width: 50%;
      position: relative;
      transition: 0.5s;
  }

  .book-name-cardp {
      transition: transform 2s;
      font-size: 60px;
      color: white;
      font-family: 'Big Shoulders Display', cursive;
  }

  .cardp:hover>p {
      opacity: 1;
      transform: scale(1.5);
      top: 80%;
  }

  .product-cardp-img:hover .cardp {}

  .product-cardp-img, #parent {
      cursor: pointer;
      transform: scale(1);
  }

  .cardp:hover>img {
      opacity: 1;
      transform: scale(1.4);
  }

  .cardp header {
      position: absolute;
      top: 120%;
      left: 0%;
      padding: 1px;
      border-radius: 25px;
      width: 450px;
      height: 90px;
      transition: all .5s;
      opacity: 0;
  }

  .cardp:hover>header {
      opacity: 1;
      width: 450px;
      height: 90px;
      transform: translateY(-120px);
  }

  .cardp {
      transition: transform .7s;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      border-radius: 500px;
      margin: auto;
      text-align: center;
      font-family: arial;
      background: white;
      width: 450px;
      height: 450px;
  }

  .cardp:hover {
      transform: scale(1.08);
  }

  .centeri {
      position: fixed;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
  }