#StackBounty: #html #css #bootstrap-4 Hover on bootstrap card overlay

#Projects .card {
  position: relative;
  overflow: hidden;
}

#Projects .card:before {
  position: absolute;
  content: '';
  width: 80%;
  height: 220%;
  background:rgba(199, 0, 57, .9);
  top: -50%;
  left: -100%;
  z-index: 1;
  transform: rotate(20deg);
  transform-origin: center top 0;
  transition: .5s;
}

#Projects .card:hover:before {
  left: 10%;
}

#Projects .card .card-text {
  width: 100%;
  padding: 0 20px;
  position: absolute;
  top: -150%;
  color: #fff;
  left: 0;
  z-index: 2;
  transition: .5s;
}

#Projects .card:hover .card-text {
   top: 20%;
}


@media (max-width: 992px) {
  #Projects .card:hover .card-text {
    top: 15%;
 }

  #Projects  .card-text a {
    font-size: 11px;
  }

  #Projects .btn {
    padding: 5px 15px;
  }

  #Projects  .card-text h3 {
    font-size: 18px;
  }

  #Projects  .card-text h5 {
    font-size: 18px;
  }
  
  
}

@media (max-width: 575px) {


  #Projects .btn {
    padding: 5px 24px;
    font-size: 1.1rem;
  }

  #Projects  .card-text h3 {
    font-size: 1.5rem;
  }

  #Projects  .card-text h5 {
    font-size: 1.5rem;
  }
  

}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<section id="Projects">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6">
        <div class="card">
          <img class="card-img-top img-fluid" src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png" alt="Card image cap">
          <div class="card-text">
            <h3>Project 1</h3>
            <h5>Some text...</h5>
            <a class="btn btn-primary" href="">View</a>
          </div>
        </div>

      </div>
      <div class="col-md-6 col-sm-6">
        <div class="card">
          <img class="card-img-top img-fluid" src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png" alt="Card image cap">
          <div class="card-text">
            <h3>Project 2</h3>
            <h5>Some text...</h5>
            <a class="btn btn-primary" href="">View</a>
          </div>
        </div>
      </div>
    </div>
  </div>
 </section>