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;
}
This question is related to
css
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.
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 {_x000D_
color: #f44336;_x000D_
padding: 2px 5px;_x000D_
position: absolute;_x000D_
font-size: small;_x000D_
background-color: white;_x000D_
}_x000D_
_x000D_
.highlighter {_x000D_
animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/_x000D_
-moz-animation: fadeoutBg 3s; /* Firefox */_x000D_
-webkit-animation: fadeoutBg 3s; /* Safari and Chrome */_x000D_
-o-animation: fadeoutBg 3s; /* Opera */_x000D_
}_x000D_
_x000D_
@keyframes fadeoutBg {_x000D_
from { background-color: lightgreen; } /** from color **/_x000D_
to { background-color: white; } /** to color **/_x000D_
}_x000D_
_x000D_
@-moz-keyframes fadeoutBg { /* Firefox */_x000D_
from { background-color: lightgreen; }_x000D_
to { background-color: white; }_x000D_
}_x000D_
_x000D_
@-webkit-keyframes fadeoutBg { /* Safari and Chrome */_x000D_
from { background-color: lightgreen; }_x000D_
to { background-color: white; }_x000D_
}_x000D_
_x000D_
@-o-keyframes fadeoutBg { /* Opera */_x000D_
from { background-color: lightgreen; }_x000D_
to { background-color: white; }_x000D_
}<div class="field-error highlighter">File name already exists.</div>Source: Stackoverflow.com