CSS positioning and Z-index on card : I'm trying to code this card design. [Image of the design][1]


However, I need some help with the positioning and Z-index. This is how far I've come:

HTML: 

    <div class="card">
      <div class="card-hover-state"></div>
      <div class="information-container">
              <div class="card-hover-state-title">Brace yourself - A fancy Lorem Ipsum Title is comming</div>
        <div class="card-hover-state-button">READ MORE</div>
      </div>
    </div>

CSS:

    .card {
      width: 450px;
      height: 400px;
      background: lightblue;
    }
    
    .card-hover-state {
    	position: relative;
      width: 100%;
      height: 100%;
    	background-image: linear-gradient(-180deg, #000000 0%, rgba(216,216,216,0.00) 100%);
      opacity: 0.6;
    }
    
    .card-hover-state-title {
      font-size: 15px;
      color: #FFFFFF;
      max-width: 60%;
    }
    
    .card-hover-state-button {
      font-size: 11px;
    color: #FFFFFF;
    }

Hope I'm asking the right question. Can you help me or maybe some tutorials to read? 

Thanks!


  [1]: https://i.stack.imgur.com/loawZ.jpg
  [2]: https://codepen.io/klati/pen/PjyxVW