On hover the p tag is visible

<style>
.hov-text-img {
    height: 500px;
}

#hov-box-text {
    display: none;
    transform: translateY(0);
    /* Initial position */
    transition: transform 0.3s ease;
}

#hov-box-heading {
    transform: translateY(0);
    /* Initial position */
    transition: transform 0.3s ease;
}

.hov-text-img:hover #hov-box-text {
    display: block;
    transform: translateY(-10px);
}

.hov-text-img:hover #hov-box-heading {
    transform: translateY(-10px);
}

.hov-text-img {
    position: relative
}

.hov-text {
    position: absolute;
    bottom: -14%;
    transition: 0.3s all;
    border-radius: 30px;
    background: linear-gradient(0deg, #000 0%, rgba(102, 102, 102, 0.00) 95.6%);
    left: 0;
    width: 100% !important;
    margin: 0 auto;
    padding: 7rem 1.2rem 0;
    display: flex
;
    justify-content: end;
    align-items: center;
}

.hov-text-img {
    overflow: hidden;
    position: relative;
}

.hov-text-img .elementor-widget-container {
    border-radius: 30px !important;
}

.hov-text-img .elementor-widget-wrap.elementor-element-populated {
    overflow: hidden;
}

.hov-text-img .hov-text h3 {
    color: #fff !important;
    font-size: 22px;
    margin: 0 !important;
    font-weight: 600;
    white-space: nowrap;
}

.hov-text-img .hov-text p {
    height: 100%;
    min-height: 110px;
    transition: 0.3s all;
    transform: translateY(60px);
}
.hov-text-img:hover .hov-text p {
    transform: translateY(10px);
}

.hov-text-img:hover .hov-text {
    bottom: 0%;
    padding: 23rem 1.2rem 0;
}

.hov-text-img {
    overflow: hidden;
}
@media (max-width:768px) {
    .hov-text-img .hov-text h3 {
    color: #fff !important;
    font-size: 20px;
    margin: 0 !important;
    font-weight: 600;
    white-space: nowrap;
}
}

</style>