The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

how make a colored text fade into another using a hover code? (using css transitions)

4 posters

Go down

Solved how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 Tue May 19, 2015 7:15 pm

how make a colored text fade into another using a hover code?

(using css transitions)


Last edited by Ace 1 on Thu May 21, 2015 12:08 am; edited 2 times in total
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo Tue May 19, 2015 7:37 pm

Are you speaking about links on your forum
Or a paragraph of text in a post?
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by SLGray Tue May 19, 2015 7:52 pm

Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.


how make a colored text fade into another using a hover code?  (using css transitions) Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51514
Reputation : 3523
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 Tue May 19, 2015 7:55 pm

@sir. mayonnaise I am referring to a link.

Forum site: http://genocideclan.forumotion.com/
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo Tue May 19, 2015 10:22 pm

Just one link or all links?
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 Tue May 19, 2015 10:33 pm

All links <a>

Including those in my chatbox which don't do that.
Also including the topics inside forums which don't do that.
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo Tue May 19, 2015 10:44 pm

Now what color did you want for for plain links?

And what color for when you hover them?
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 Tue May 19, 2015 10:48 pm

It should fade from white hex code #fff to 
Cyan hex code #0ff
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo Tue May 19, 2015 10:55 pm

Try adding this to  the top of your Css Style sheet.
Code:

a {
  color: #fff !important;
  
  /* dont edit bellow this line */
  transition: color 1.0s linear !important;
  -o-transition: color 1.0s linear !important;
  -moz-transition: color 1.0s linear !important;
  -webkit-transition: color 1.0s linear !important;
/* dont edit above this line */

}
 
a:hover {
  color: #0ff !important;
}


Please let me know if this code worked for you, if not i will fix it.


Last edited by Sir. Mayo on Tue May 19, 2015 11:09 pm; edited 1 time in total (Reason for editing : added info)
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 Tue May 19, 2015 11:15 pm

Ok, but I'm changing the code behind the line


Nvm it didnt work even when I didn't change it. It completely removed every fade code I had already now it doesn't do anything when you hover :\


Last edited by Ace 1 on Tue May 19, 2015 11:16 pm; edited 1 time in total
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo Tue May 19, 2015 11:15 pm

What on them are you changing? Just change the numbers, the rest is need to make sure it works on all browsers.
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 Tue May 19, 2015 11:28 pm

I was gonna change linear to "ease-in-and-out" cuz I wanna ease up in there and then ease out of there.
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo Tue May 19, 2015 11:30 pm

Post what you changed it to if you still have it

You may not have removed enough.
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 Tue May 19, 2015 11:42 pm

Code:
a {
  color: #fff !important;
  
  /* dont edit bellow this line */
  transition: color 1.0s linear !important;
  -o-transition: color 1.0s linear !important;
  -moz-transition: color 1.0s linear !important;
  -webkit-transition: color 1.0s linear !important;
/* dont edit above this line */

}


Ace 1 wrote:Ok, but I'm changing the code behind the line


Nvm it didnt work even when I didn't change it. It completely removed every fade code I had already now it doesn't do anything when you hover :\
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo Wed May 20, 2015 1:00 am

Does this do it for you:

Code:
a {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  color:#fff;
}
a:hover, a:focus, a:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  color:#0ff;
}

sorry for taking so long, i had no idea about the ease in , ease out effect and was reading up on it.

Here is the Minified version:
Code:
a{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:color;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;color:#fff}a:active,a:focus,a:hover{-webkit-transform:scale(1.1);transform:scale(1.1);color:#0ff}
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by SLGray Wed May 20, 2015 1:03 am

Try this:
Code:
a:link:hover, a:link:focus {
text-decoration: none !important;
text-shadow: 0 0 0.9em red, 0 0 0.9em red, 0 0 0.9em red;
}
Change the places that say red with your color.  The numbers are for how bright or dark the hover color will be.


how make a colored text fade into another using a hover code?  (using css transitions) Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51514
Reputation : 3523
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 Wed May 20, 2015 2:13 pm

@SLGray @Sir. Mayonnaise

That's cool and all, but... All I wanted was for all of my links to turn blue. For example, click here and hover over "Application Template".

This turns blue.

Then go back to the link and hover over "Pivot-Son #1".

See the difference? Idk why this happens this way. Because in the other forums (like this one) it hovers fine between the Announcements and Topics.
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by SLGray Wed May 20, 2015 8:18 pm

That is weird.  It hovers correctly when you open the topic.


how make a colored text fade into another using a hover code?  (using css transitions) Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51514
Reputation : 3523
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 Wed May 20, 2015 8:22 pm

I thought maybe there could be a code that does this for all forum links
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by SLGray Wed May 20, 2015 8:36 pm

The code we gave you should work on all links.

I was wrong.  Add this to your CSS:
Code:
a.topictitle:link:hover, a.topictitle:link:focus {
  Add the same code I gave for links
}


how make a colored text fade into another using a hover code?  (using css transitions) Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51514
Reputation : 3523
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo Wed May 20, 2015 9:55 pm

@Ace 1

There are types of links that can be changed in the css.

there is just plain a {} which is for all links on the fourm
there is a:hover {} which shows the values when you hover the link
then there is a:visited {} which shows up on links you have visited. I Will see if i can figure out a code to do what you wanted just give me a little time.

Best wishes Sir.Mayo


EDIT:

IT appears that you Topic title is a span tag with a color code in the html,


<span style="color:#FFFFFF;text-decoration:none;">Pivot-son #1</span>

See the style=color:#FFFFFF; That is causing the css for that span to be over written.

I think if you go to your acp and right before the CSS tab is a colors tab where you can change link colors see if what you want can be done in there But i doubt it

Now, the only other thing i can say is it may be your topics_list_box template or something similar to that.

Could you post your topics_list_box template here so i can have a look at it.



Last edited by Sir. Mayo on Wed May 20, 2015 10:12 pm; edited 2 times in total (Reason for editing : added info)
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ange Tuteur Wed May 20, 2015 11:26 pm

The standard syntax would be :
Code:
/* DEFAULT DISPLAY */
a {
  color:#FF0;
  transition:500ms;
}

/* HOVER DISPLAY */
a:hover { color:#F00 }
( You can also use a:link for default links, a:visited for visited, and a:active for active links )

If you wanted to have better CSS3 support for older browsers, prefixing transition is the way to go.
Code:
  -webkit-transition:500ms;
    -moz-transition:500ms;
      -o-transition:500ms;
( that would be added to the first rule )

Normally when a style doesn't take effect, adding the !important flag should override the style that wasn't changing to begin with. However, in Ace's case, it appears that the topic title is being colored by a span tag. I'm assuming you have the ability to color topic titles enabled.

Anyway, you can override this style with the following rule :
Code:
a.topictitle:hover span { color:#F00 !important }

Change the red hexadecimal color to whatever you want. Wink
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo Wed May 20, 2015 11:44 pm

Ange Tuteur wrote:The standard syntax would be :
Code:
/* DEFAULT DISPLAY */
a {
  color:#FF0;
  transition:500ms;
}

/* HOVER DISPLAY */
a:hover { color:#F00 }
( You can also use a:link for default links, a:visited for visited, and a:active for active links )

If you wanted to have better CSS3 support for older browsers, prefixing transition is the way to go.
Code:
  -webkit-transition:500ms;
    -moz-transition:500ms;
      -o-transition:500ms;
( that would be added to the first rule )

Normally when a style doesn't take effect, adding the !important flag should override the style that wasn't changing to begin with. However, in Ace's case, it appears that the topic title is being colored by a span tag. I'm assuming you have the ability to color topic titles enabled.

Anyway, you can override this style with the following rule :
Code:
a.topictitle:hover span { color:#F00 !important }

Change the red hexadecimal color to whatever you want. Wink
Thanks for clearing that up Ange, i thought i missed something and knew of an easier way to do this.

But yea @Ace 1 What Ange posted should work, no need for the template now.
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 Thu May 21, 2015 12:06 am

Solved

Thanks Very Happy
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ange Tuteur Thu May 21, 2015 5:38 pm

No problem. Wink

Topic archived
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum