All Collections
Style
Simple text transitions
Simple text transitions
Patrick Farley avatar
Written by Patrick Farley
Updated over a week ago

A few lines of css can give your project a new look and feel.  Let's see how changing the color of text can have a big effect.

How To:

1. Add this style sheet to your current project:
//hapyak_demos.s3.amazonaws.com/css/customer/sample_on_hover_text_change.css

Or add this css to your current sheet:

.popcorn-pop.hapyak-theme-black.bright-red.active {
   color: #C60C46;
   background: rgba(255, 255, 255, 0);
   -webkit-transition: color 0.5s ease-in-out;
   -moz-transition: color 0.5s ease-in-out;
   -ms-transition: color 0.5s ease-in-out;
   -o-transition: color 0.5s ease-in-out;
   transition: color 0.5s ease-in-out;
}

.popcorn-pop.hapyak-theme-black.bright-red.active:hover {
   background: rgba(255, 255, 255, 0);
   color: #f40656;
}

2.  Create a new text annotation

3.  Click, Edit

4.  Click, More

5.  Click, Add Class

6.  Within the text box add a color, ex: bright-red 

7.  Click, Submit

Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development.

Did this answer your question?