<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>