How to add hover colour to a div which has linear gradient Border?

Question

I am trying to add hover color to this particular div but it dosen't work out, because of the gradient background that is added to get the border-radius working.

I am doing this in a React Component using css-modules .

What is the problem here? I am not an expert at css but will love to know the reason of the problem and how to mitigate it .

 .card{ width: 40%; height: 150px; border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(125deg, #42E4A3, #A383E8) border-box; border-radius:8px; display:inline-block; } .card:hover{ background-color: rgba(0,0,0,0.04); } 

 <div class="card"> No Hover color red <br/> I am doing this in React a small gist of the problem </div> 

Update

After adding the styles as mentioned i get the opposite effect where the border gradient color appears on hover .If i add this i get the color but the b order color then disappears.

The gradient dosen't accept rgba with such low opacity for some reason , what is the reason for this

.card:hover{
  background:
    linear-gradient(rgba(0,0,0,0.04),rgba(0,0,0,0.04)) padding-box;
} // no border color , when i change the color to rgba opacity it dosent work 

rgba(0,0,0,0.1) works but why not rgba(0,0,0,0.04)

Answer 1

You can fix it like that:

.card:hover{
  background: red;
}

and it will work =)

or, if you want to keep your gradient border:

.card:hover{
      background: linear-gradient(red,red) padding-box, 
                  linear-gradient(125deg, #42E4A3, #A383E8) border-box;
    }

If you need a semitransparent color of background, you can re-edit your solution like this ( demo on Codepen ). But anyway you will see on hover bottom background because of semitransparency.

Answer 2

In your :hover style you should redefine the background property with the border gradient, just simply replace the white color #fff with your new color red

 .card{ width: 40%; height: 150px; border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(125deg, #42E4A3, #A383E8) border-box; border-radius:8px; display:inline-block; } .card:hover{ background: linear-gradient(red,red) padding-box, linear-gradient(125deg, #42E4A3, #A383E8) border-box; } 

 <div class="card"> No Hover color red <br/> I am doing this in React a small gist of the problem </div>