0

I am trying to follow this tutorial because I like the effect so much.

CSS Text Glow on Hover with Transition Effects

But the problem is, I set the background color to white.

<style>
.text-glow-hover-with-delay{
background: #FFFFFF;
color: #fff;
transition: text-shadow 3s;
-moz-transition: text-shadow 3s; /* Firefox 4 */
-webkit-transition: text-shadow 3s; /* Safari and Chrome */
-o-transition: text-shadow 3s; /* Opera */
}

.text-glow-hover-with-delay:hover{
text-shadow: 0 0 10px #fff;
}
</style>

<div class="text-glow-hover-with-delay">
Put your mouse over me and I will glow slowly.
</div>

and now it doesn't glow anymore. I'm noob on CSS here. :(

3 Answers 3

1

May be you are not able to see the shadow cause its white. But, its working fine and smoothly. Just reduce the time, 3 seconds are too much.

Here is the working DEMO

OR, if you just want a white shadow See Here

1
  • 어.. you're right! Ahh.. I failed to comprehend. Thank you. It's working good now.
    – ParkDongJu
    Sep 3, 2012 at 15:49
0

I removed the transition CSS as it seemed to be messing it up and I changed the color tpo black:

http://jsfiddle.net/Ce5SB/

0

For css transitions you must go from point A to point B.

This means that point A should have a default text-shadow on your default class.

 .text-glow-hover-with-delay{
      text-shadow:0 0 0 #fff;/*This is the missing piece*/

      ....
 }

With the above missing piece, point B will know where to transition from.

also let me know if the above doesn't work. You may also want to try the transition as

 transition:all 300ms ease;/*just in case each browser wants to capture its browser specific text shadow property*/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.