CSS CARD 3

HTML

<div class="card">
    <span> CSS CARD 2 </span> 
    <img src="https://erkanunlu.com.tr/resim/semsiye.jpg" alt="">
    <h2>Lorem ipsum dolor  </h2>
    <h3>
      Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor  
      <a href=""> Lorem Ipsum</a>
    </h3>
  </div>

CSS

 * {
      margin:0;
      padding:0;
      font-family:calibri; 
      box-sizing: border-box;
      transition: .5s;
    }
    body {
      background-color: #151515;
      display: flex;
      justify-content: center;
      align-items: center;
      height:100vh;
    }
    .card {
      width:300px;
      border:1px solid #333; 
      border-radius:1rem;  
      background-color:#000;
      text-align: center;
      position: relative; 
      padding: 2rem;      
      color:#fff; 
      overflow: hidden;
    }    
    .card img {
      width:100%;
      border-radius: 1rem; 
    }
    .card span {
      background-color:#da3d00 ;
      color:#fff;
      position: absolute;
      top:2.5rem;
      left:2.5rem;
      padding:.2rem .5rem;
      border-radius:5px;
      font-weight:bold;
      z-index: 3;
      font-size: .8rem;
    }    
    .card h2 { 
      margin-top:1rem;
      font-size: 1.6rem
    }
    .card h3 {
      color: #fff;  
      width:100%;
      height:100%;
      background-color:#da3d00;
      position: absolute;
      top:-100%;
      left: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      border-radius: 1rem;
    }
    .card a {
      background-color:#fff;
      color:#da3d00;
      padding :.6rem 1rem;
      display: block;
      margin-top:1rem;
      text-decoration: none;
      border-radius: 1rem;
    }

    .card:hover h3 {top:0}