The CSS transition on my a tag isn't fading in and out, its just like there's no transition at all! I tried using transition: background 300ms ease-in-out;
too but still no luck
CSS:
.FeatureRow a{
padding: 10px;
display: block;
width: 260px;
height: auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 4px 8px #f5f5f5;
-moz-box-shadow: 0px 4px 8px #f5f5f5;
box-shadow: 0px 4px 8px #f5f5f5;
background-image: -moz-linear-gradient(top,#fbfbfb,#ffffff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbfbfb),to(#ffffff));
background-image: -webkit-linear-gradient(top,#fbfbfb,#ffffff);
background-image: -o-linear-gradient(top,#fbfbfb,#ffffff);
background-image: linear-gradient(to bottom,#fbfbfb,#ffffff);
background-repeat: repeat-x;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
}
.FeatureRow a:hover{
background-image: -moz-linear-gradient(top,#C00,#C0F);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#C00),to(#C0F));
background-image: -webkit-linear-gradient(top,#C00,#C0F);
background-image: -o-linear-gradient(top,#C00,#C0F);
background-image: linear-gradient(to bottom,#C00,#C0F);
}
As Adrift says, this is not supported; you have to simulate it.
This is the CSS
.FeatureRow {
padding: 10px;
display: block;
position: relative;
width: 260px;
height: 70px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-image: linear-gradient(0deg,white,gray);
}
.FeatureRow:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: linear-gradient(0deg,red,magenta);
opacity: 0;
transition: all 3s ease-in-out;
}
.FeatureRow:hover:after {
opacity: 1;
}
We are overlaying your div with a pseudo element. Each one has a gradient. The pseudo element has opacity set to 0; when you hover it you change the opacity to 1; and this property can be transitioned.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With