CODEWITHSUNDEEP
javascripthtmlcssreactjs
Rahul Singh
Rahul Singh

Reputation: 19622

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

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)

Upvotes: 1

Views: 1395

Answers (2)

Natalia Davydova
Natalia Davydova

Reputation: 748

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.

Upvotes: 2

zgood
zgood

Reputation: 12581

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>

Upvotes: 2

Related Questions