How to put the mouse over text animation?

It can be done with CSS or JavaScript. JavaScript will be better (I guess).

Here is CSS, add to Page Settings > Advanced > Header

The idea is that when hovered, it will hide the original text, and insert a new text. You will need to adjust to find the appropriate font-size so that it does not cause problems.

Your banner has 3 paragraphs. And the text you want to change, it's in the middle, so I use nth-child (2).

<style>
  .desc-wrapper p:nth-child(2):hover strong {
    visibility: hidden;
}
  .desc-wrapper p:nth-child(2):hover strong:before {
    content: "Next Text";
    visibility: visible;
    font-size: 15px;
}
</style>

JavaScript: 

• We will change the old text to new text when hovering (CSS doesn't support this)
• or we will add data-attribute="New text" to Current Text, then use CSS to remove current text - show data-attribute as new text.

It will take time, so you can send your question to my email via link in signature.