Hover on bootstrap card overlay Just created an overlay on hover following a Youtube tutorial - but I adjusted some css to make it responsive.
I'd like to hear hear some reviews or suggestions where I can improve.


#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;
  }
  

}
 &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;

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

      &lt;/div&gt;
      &lt;div class="col-md-6 col-sm-6"&gt;
        &lt;div class="card"&gt;
          &lt;img class="card-img-top img-fluid" src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png" alt="Card image cap"&gt;
          &lt;div class="card-text"&gt;
            &lt;h3&gt;Project 2&lt;/h3&gt;
            &lt;h5&gt;Some text...&lt;/h5&gt;
            &lt;a class="btn btn-primary" href=""&gt;View&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
 &lt;/section&gt;
In large projects is important to save as much space as possible.
Your selectors are way to specific for example :
#Projects .card .card-text {}

Whereas this will do:
.card-text {}

If the purpose of this was a different card-text in a different card you can add another class to card-text as a modifier