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

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

(using css transitions)

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

@sir. mayonnaise I am referring to a link.

Forum site: http://genocideclan.forumotion.com/

Just one link or all links?

All links <a>

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

Now what color did you want for for plain links?

And what color for when you hover them?

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

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.

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 :\

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

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

Post what you changed it to if you still have it

You may not have removed enough.

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 :\

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}

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.

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

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

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

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
}

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

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.

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.

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.

Solved

Thanks

No problem.

Topic archived