CODEWITHSUNDEEP
css
Zachc40
Zachc40

Reputation: 27

Text-Shadow transition on and off hover

trying to get my website to transition text-shadow on and off hover. When I use a transition without a specified property you can see font-size,color,etc transition. When specifying the text-shadow property in the transition no transition appears (currently using Chrome to test).

nav ul li a {
    color: white;
    transition: text-shadow 0.5s ease;
}
    
nav ul li a:hover {
    color:grey;
    text-shadow: 2px 2px 10px rgba(255,255,255,0.23);    
}

Upvotes: 1

Views: 1113

Answers (2)

somethinghere
somethinghere

Reputation: 17350

Are you sure you are not being deceived by the lightness of your color? I have amended your code and made it a workable snippet, and if I change the color to something more explicit, like red and yellow, you can actually see the effect. It's pretty feint, though. It seems like adding that property to the default does indeed work.

body {
    background: black;
}

h1, h2 {
    color: white;
    text-shadow: 2px 2px 10px red; 
    transition: text-shadow 1s ease;
    z-index: 1;
    position: relative;
}
h2 {
    text-shadow: 2px 2px 10px transparent;
}
    
h1:hover,
h2:hover {
    text-shadow: 2px 2px 10px yellow; 
}
<h1>Hover on me for text shadow!</h1>
<h2>Hover on me for text shadow!</h2>

Upvotes: 1

Brian Wiltshire
Brian Wiltshire

Reputation: 447

You need to add shadow and transition in both declarations

Try this css code

nav ul li a {
    color: white;
    transition: 0.5s ease;
    text-shadow: 2px 2px 10px rgba(255,255,255,0);
}
    
nav ul li a:hover {
    color:grey;
    text-shadow: 2px 2px 10px rgba(255,255,255,0.23); 
    transition: 0.5s ease;   
}

Upvotes: 0

Related Questions