I am facing issues with same animation in WordPress, I want same animation as like in video for image over and click on price and duration. I have attached the video so that you can check. https://drive.google.com/file/d/1hvrUPxrh7L8Ay-cn6A3zRMYgjHXmpjsD/view?usp=sharing Please if it is possible to find out same animation then answer it, please Here is the Code: <script> document.addEventListener('DOMContentLoaded', function() { const cardWidgets = document.querySelectorAll('.custom-card-widget'); cardWidgets.forEach(card => { const hoverBg = card.getAttribute('data-hover-bg'); const description = card.querySelector('.card-description-hover'); let hoverTimeout; // Split the hover description into separate lines wrapped in spans const lines = description.innerHTML.split('\n').map(line => `<span>${line}</span>`).join(''); description.innerHTML = lines; card.addEventListener('mouseenter', function() { card.style.backgroundImage = `url(${hoverBg})`; // Delay showing the hover description by 2 seconds hoverTimeout = setTimeout(() => { card.classList.add('hover-active'); }, 700); // 2 seconds delay }); card.addEventListener('mouseleave', function() { clearTimeout(hoverTimeout); card.classList.remove('hover-active'); }); }); }); </script> <style> .custom-card-widget { position: relative; padding: 10px; background-size: cover; background-position: center; transition: background-image 0.3s ease-in-out; height: 300px; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; } .custom-card-widget .card-content { position: relative; z-index: 1; color: white; transition: all 0.3s ease; } .custom-card-widget .card-title { font-size: 22px; font-weight: 500; line-height: 24px; margin-bottom: 10px; transition: transform 0.3s ease-in-out; transform: translateY(0); } .custom-card-widget .card-description-default { font-size: 16px; margin-bottom: 10px; opacity: 1; transition: opacity 0.4s ease; } .custom-card-widget .card-description-hover { font-size: 16px; opacity: 0;margin-top: -47px; transform: translateY(-30px); /* Start above */ transition: opacity 0.4s ease, transform 0.6s ease-in-out; /* Slow down the slide */ } .custom-card-widget:hover .card-title { transform: translateY(-20px); /* Slide title upward */ margin-top: 25px!important; } .custom-card-widget:hover .card-description-default { opacity: 0; /* Hide default description */ } .custom-card-widget.hover-active .card-description-hover { opacity: 1; /* Show hover description */ transform: translateY(0); /* Slide in from above */ } .tent { background: #ffffff; height: 1.6px; width: 26%; margin-top: 8.5em !important; text-align: center; margin: 0px auto; } .custom-card-widget:hover .tent { margin-top: 1em !important; } /* Animation for line-by-line fade-in with delay */ .custom-card-widget .card-description-hover span { display: block;font-size:15px!important; opacity: 0; transform: translateY(-20px); /* Slide from above */ transition: opacity 0.6s ease, transform 0.6s ease; } /* Add delay for each line */ .custom-card-widget.hover-active .card-description-hover span:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); } .custom-card-widget.hover-active .card-description-hover span:nth-child(2) { transition-delay: 1s; opacity: 1; transform: translateY(0); } .custom-card-widget.hover-active .card-description-hover span:nth-child(3) { transition-delay: 2s; opacity: 1; transform: translateY(0); } .custom-card-widget.hover-active .card-description-hover span:nth-child(4) { transition-delay: 3s; opacity: 1; transform: translateY(0); } </style> Run code snippetExpand snippet