.text2 {
    padding-top: 50%;
    transform: translateY(-5em);
    transition: 0.2s;
    opacity: 0;
  }
  
  .card:hover .two {
    opacity: 1;
    transition: 0.4s;
  }
  
  .card:hover .three {
    opacity: 1;
    transition: 0.5s;
  }
  
  .card:hover .four {
    opacity: 1;
    transition: 0.6s;
  }
  
  .card:hover .five {
    opacity: 1;
    transition: 0.7s;
  }
  
  .card:hover .six {
    opacity: 1;
    transition: 0.8s;
  }
  
  .card:hover .text1 {
    opacity: 0;
  }
  
  .card:hover .text2 {
    transform: translateY(2em);
    transition-delay: 0.5s;
    opacity: 1;
  }
  
  .text1 {
    position: absolute;
    opacity: 1;
  }