62

I am trying to get this h3 to fade on hover. Can someone help me out?

HTML

<h3 class="clicker">test</h3>

CSS

.clicker {
    -moz-transition:color .2s ease-in;
    -o-transition:color .2s ease-in;
    -webkit-transition:color .2s ease-in;
    background:#f5f5f5;padding:20px;
}

.clicker:hover{
    background:#eee;
}
2
  • Do you mean invisible by fade?
    – Ovilia
    Commented Jan 16, 2013 at 1:43
  • I just want it to fade from #f5f5f5 to #eee
    – J82
    Commented Jan 16, 2013 at 1:43

2 Answers 2

118

What do you want to fade? The background or color attribute?

Currently you're changing the background color, but telling it to transition the color property. You can use all to transition all properties.

.clicker { 
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    background: #f5f5f5; 
    padding: 20px;
}

.clicker:hover { 
    background: #eee;
}

Otherwise just use transition: background .2s ease-in.

0
3

For having a trasition effect like a highlighter just to highlight the text and fade off the bg color, we used the following:

.field-error {
    color: #f44336;
    padding: 2px 5px;
    position: absolute;
    font-size: small;
    background-color: white;
}

.highlighter {
    animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/
    -moz-animation: fadeoutBg 3s; /* Firefox */
    -webkit-animation: fadeoutBg 3s; /* Safari and Chrome */
    -o-animation: fadeoutBg 3s; /* Opera */
}

@keyframes fadeoutBg {
    from { background-color: lightgreen; } /** from color **/
    to { background-color: white; } /** to color **/
}

@-moz-keyframes fadeoutBg { /* Firefox */
    from { background-color: lightgreen; }
    to { background-color: white; }
}

@-webkit-keyframes fadeoutBg { /* Safari and Chrome */
    from { background-color: lightgreen; }
    to { background-color: white; }
}

@-o-keyframes fadeoutBg { /* Opera */
    from { background-color: lightgreen; }
    to { background-color: white; }
}
<div class="field-error highlighter">File name already exists.</div>

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.