galaxy/Cards/Web-Potato_quick-bird-33.html

<div class="card">
    <p class="text1">Come Deeper
    </p>
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">
                    <div class="five">

                        <p class="text2">It's<br>Deep<br>In Here...
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by Web-Potato - Tags: card */
.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;
}

</style>