Jump to content

How to put the mouse over text animation?

Recommended Posts

  • Replies 1
  • Views 722
  • Created
  • Last Reply

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

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


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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.