<div class="box">
          <img src="https://picsum.photos/400" alt="" title="" >
          <div class="info">
              <h4>project name goes here 1</h4>
              <p>category project</p>
          <div class="links">
              <a href="https://picsum.photos/400" title="Card 1"><i class="fas fa-plus"></i></a>
              <a href="portfolio-details.html" title="Portfolio Details"><i class="fas fa-link"></i></a>
          </div>
          </div>

body{
   display: flex;
   justify-content: center;
   align-items: center;
   height:100vh;
}

.box {
      position: relative;
      overflow: hidden;
      max-width: 400px;
      width:100%;
      height: 18.5rem;
    }

    .box img {
      width: 100%;
      height: 100%;
    }

    /*oculto el texto de cada item*/
    .box .info {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      /*aplico transition para que desaparezca suavemente*/
      transition-duration: 1s;
      transition-property: all;
    }

    .box::before {
      content: "";
      background: rgba(255, 255, 255, 0.7);
      position: absolute;
      left: 30px;
      right: 30px;
      top: 30px;
      bottom: 30px;
      opacity: 0;
       /*aplico transition para que desaparezca suavemente*/
      transition-duration: 1s;
      transition-property: all;
    }

    .box:hover::before {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 1;
      transition-duration: 1s;
      transition-property: all;
    }

    .box .links {
      text-align: center;
    }

    .box:hover .info {
      opacity: 1;
      transition-duration: 1.5s;
      transition-property: all;
    }

    .box .links a {
      color: #45505b;
      margin: 0 2px;
      font-size: 28px;
      display: inline-block;
    }

    .box .links a:hover {
      color: #148af9;
    }