CODEWITHSUNDEEP
htmlcss
Scipion
Scipion

Reputation: 11888

Transition from a gradient to a non-gradient background on hover

I am using a gradient to set the background color on one element. The thing is, I am also having an "hover" background but not using the gradient. At the minute, when I hover on an element having the class .tinted it flashes as it first display no background and then apply the rgba(0,0,0,0.65) Is there any way that the transition could directly go from 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);
}

Upvotes: 3

Views: 87

Answers (3)

vals
vals

Reputation: 64164

A posibility is to set a gradient that has 2 parts, one with the color changing, and the other with a constant color.

And change the part of the gradient that you are showing 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>

Upvotes: 0

hmak
hmak

Reputation: 3968

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>

Upvotes: 0

lmgonzalves
lmgonzalves

Reputation: 6588

You need to define the gradients with background-image and the 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);
}

DEMO

Upvotes: 3

Related Questions