CODEWITHSUNDEEP
htmlcssfade
howiepaul
howiepaul

Reputation: 43

Fade Background but NOT Text

I have applied a CSS fade in/out solution to a div, which im happy with, for the most part. However I only want to apply it to the background, not the text. I need the text to be fully opaque at all times.

See example: http://jsfiddle.net/howiepaul/gUAPV/33/

a.tab {background-color:#d4d4d4;
font-family: arial;
font-weight: bold;}

a.tab:hover {
opacity:1;
animation: tickhov 1.5s;
-moz-animation: tickhov 1.5s; /* Firefox */
-webkit-animation: tickhov 1.5s; /* Safari and Chrome */}
@-ms-keyframes tickhov {from {opacity:0.2;} to {opacity:1;}}
@-moz-keyframes tickhov /* Firefox */ {from {opacity:0.2;} to {opacity:1;}}
@-webkit-keyframes tickhov /* Safari and Chrome */ {from {opacity:0.2;} to {opacity:1;}}

a.tab{
opacity:0.2;
animation: letgo 1.5s;
-moz-animation: letgo 1.5s; /* Firefox */
-webkit-animation: letgo 1.5s; /* Safari and Chrome */}
@-ms-keyframes letgo {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}
@-moz-keyframes letgo /* Firefox */ {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}
@-webkit-keyframes letgo /* Safari and Chrome */ {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}

Any help would be gratefully received.

Many thanks Howie

Upvotes: 3

Views: 3384

Answers (2)

Daniel Imms
Daniel Imms

Reputation: 50189

You should be animating on background-color not opacity. FYI if this is all you're doing you should use transitions instead of animations, they're much simpler.

jsFiddle

a.tab {
    position:relative;
    font-family: arial;
    font-weight: bold;
    background-color:rgba(212,212,212,.2);
    -moz-transition:background-color 1.5s ease;
    -webkit-transition:background-color 1.5s ease;
    transition:background-color 1.5s ease;
}

a.tab:hover {
    background-color:rgba(212,212,212,1);
}

Upvotes: 1

Raman
Raman

Reputation: 1376

No need to use animations for this and write such a bulky code. If you just need to change the background keeping the text as it is, you should use CSS Transitions instead. They are much simpler and easy to use and this can be achieved with very few lines of code. Here is the fiddle demo

http://jsfiddle.net/gUAPV/37/

a.tab {
    background-color: #f4f4f4; 
    font-family: arial;
    font-weight: bold;
    font-size : 40px;
}

a.tab:hover {
   background-color:#d4d4d4;

   -webkit-transition: background 300ms ease-in 200ms;
   -moz-transition: background 300ms ease-in 200ms;
   -o-transition: background 300ms ease-in 200ms;
   transition: background 300ms ease-in 200ms;
}

I have increased the Font size to make it more prominent to see, you can adjust according to your use.

P.S. If you want to read some more about CSS Transitions here are some useful links

W3.Org Link

Mozilla Develper Forum Link

Hope this helps :)

Upvotes: 1

Related Questions