.card {
  width: 190px;
  height: 254px;
  background: #d3d3d3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.one {
  width: 90%;
  height: 95%;
  background-color: #c0c0c0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3%;
}

.two {
  width: 90%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  border-radius: 3%;
  background-color: #9c9c9c;
  transition: 1s;
  transition-delay: 0.2s;
}

.three {
  width: 90%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  border-radius: 3%;
  background-color: #797979;
  transition: 0.9s;
  transition-delay: 0.2s;
}

.four {
  width: 90%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ececec;
  opacity: 0;
  border-radius: 3%;
  background-color: #5a5a5a;
  transition: 0.8s;
  transition-delay: 0.2s;
}

.five {
  width: 90%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ececec;
  opacity: 0;
  border-radius: 3%;
  background-color: #424242;
  transition: 0.7s;
  transition-delay: 0.2s;
}

.six {
  width: 90%;
  height: 95%;
  color: #ececec;
  text-align: center;
  opacity: 0;
  border-radius: 3%;
  background-color: #302f2f;
  transition: 0.6s;
  transition-delay: 0.2s;
}

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