1
\$\begingroup\$

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

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

\$\endgroup\$
0
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.