Go from gradient to non-gradient background on hover
I am using a gradient to set the background color to one element. The thing is, I also have a background " hover
" but no gradient is used. The moment I hover over the element with the class .tinted
, it blinks when it does not display the background first and then applies rgba(0,0,0,0.65)
Is there a way that the transition could go straight from the background: gradient(left, rgba(0,0,0,0.65), rgba(0,0,0,0.30))
to rgba(0,0,0,0.65)
?
.tinted {
transition: background-color 500ms linear;
background: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
background: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
background: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}
.tinted:hover {
background: rgba(0, 0, 0, 0.65);
}
source to share
You need to define gradients
with background-image
and plain color
with background-color
:
.tinted {
transition: background-color 500ms linear;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
background-image: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
background-image: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
background-image: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}
.tinted:hover {
background-color: rgba(0, 0, 0, 0.65);
}
source to share
This is what you can use for this approach:
#box{
width: 200px;
height: 300px;
background-color: orange;
background-image: -webkit-linear-gradient(top, crimson 0%, transparent 100%);
transition: all 1s ease-in-out;
}
#box:hover{
background-color: crimson;
}
<div id="box"></div>
source to share
Positivity is to set a gradient that has two parts: one with a color change and the other with a constant color.
And change whichever part of the gradient you show with background-image.position
.test {
width: 300px;
height: 100px;
background-image: linear-gradient(to right, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.3));
background-size: 200% 100%;
background-position: 100% 0%;
transition: background-position 1s;
margin: 10px;
}
.test:hover {
background-position: 0% 0%;
}
#test2 {
background-image: linear-gradient(to right, blue 50%, red 100%);
}
<div class="test"></div>
<div class="test" id="test2"></div>
source to share