Steps for adding hover color to a div with linear gradient border

Question

Steps for adding hover color to a div with linear gradient border

My current challenge involves adding a hover color to a specific div, but I'm facing obstacles due to the gradient background that was implemented to achieve border-radius functionality.

This task is being carried out within a React Component using css-modules.

I am not a CSS expert and would appreciate insight into the root cause of the issue and possible solutions.

.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

Upon implementing the specified styles, I encountered an unexpected outcome where the border gradient color shows up on hover. Adding certain changes results in the appearance of the color, but causes the border color to disappear.

The gradient seems to have restrictions when it comes to accepting low-opacity rgba values. I'm curious to understand why.

.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)

javascript html css reactjs

Answer 1

Answer №1

To enhance your hover effect, consider updating the background property in your :hover style by replacing the white color #fff with a vibrant color like 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>

Answer 2

To enhance your hover effect, consider updating the background property in your :hover style by replacing the white color #fff with a vibrant color like 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>

Answer 3

Answer №2

If you are looking to make some adjustments, you can try this method:

.card:hover{
  background: red;
}

By implementing the above code snippet, you should see the desired effect.

Alternatively, if you prefer to maintain a gradient border:

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

In case you want a slightly transparent background color, you may need to modify your solution like in this Codepen demo. However, please note that there might still be some visibility of the underlying content due to the partial transparency on hover.

Answer 4

If you are looking to make some adjustments, you can try this method:

.card:hover{
  background: red;
}

By implementing the above code snippet, you should see the desired effect.

Alternatively, if you prefer to maintain a gradient border:

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

In case you want a slightly transparent background color, you may need to modify your solution like in this Codepen demo. However, please note that there might still be some visibility of the underlying content due to the partial transparency on hover.

Steps for adding hover color to a div with linear gradient border

Answer №1

Answer №2

Similar questions

Issue with Laravel: Using `$request->all()` results in an empty array when called using JSON XHR

What happens when you try to access the property 'blur' of something that is undefined?

Enhance Your List with Icon Decorations

I encountered an issue while trying to integrate react-alert into my React application. An Uncaught Error was thrown, stating that objects are not valid as a React

How can I extract the value from the object returned by an AJAX call?

The Alphavantage was acting strangely when I ran a Google script

Enhance Data3 Sankey to disperse data efficiently

Troubleshooting issue with RadioButton check change not updating in onPost event in ASP.Net project utilizing Bootstrap HTML and C

Challenges arise when adjusting frame size for mobile and desktop devices

Having difficulty retrieving an item from a knockout observable array

Using TypeScript for Type Inference in Fetch Operations

Issue with Bcrypt comparison resulting in constant false output

Having trouble with running `npm start` on a computer that has different versions of Node and

Unlocking the power of python with web2py by tapping into html form values

Is it possible for me to use an image as a grid item?

Having trouble developing a custom jQuery tool for textareas

Start numerous nodejs servers with just a single command

Activating a link click inside a table with jquery

Why is it that the LESS compiler fails to recognize classes that are created by a zero iterator

Tips for choosing the dropdown selection on an ASPX website page