CSS CARD 2 - İÇERİK

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  </h3>
      <a href=""> Lorem Ipsum</a>
</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;
      cursor: pointer;
      text-align: center;
      position: relative; 
      padding: 2rem;      
      color:#fff; 
    }    
    .card img {
      width:100%;
      border-radius: 1rem;
      filter: grayscale(100%);
    }
    .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: #aaa;
      margin :.6rem 0;
      font-weight: normal;
      margin-bottom: 2rem;
    }
    .card a {
      background-color:#151515;
      color:#da3d00;
      padding :.6rem 1rem;display: block;
      text-decoration: none;
      border-radius: 1rem;
    }

    .card:hover {background-color:#da3d00;}
    .card:hover img { filter: grayscale(0);}
    .card:hover a {background-color:#fff;} 
    .card:hover h3 {color:#fff;}