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

ReactJS custom theme switch functionality is not functioning as intended

encountering difficulties while trying to install packages using npm

Customize nestjs/crud response

What is the best way to implement a side navigation bar with 100 tabs using Angular 4?

Tips for building a versatile client-server application with separate codebases for the JavaScript components

I want to create a feature where a video will automatically play when a user clicks on a specific item in a list using Angular

Elements within the div are overlapping each other

How can I prevent my code from resetting every time a state update occurs?

`AWS EC2 deployment of PERN stack encountering Nginx URL complication`

Steps for effectively incorporating the useEffect hook in your code

Prevent elements from overlapping within a flexbox container

difficulty in making an https request

Leveraging LESS variables within media queries

Incorporate keyframe animation into a styled component in material-ui using React

Error encountered in Angular $injector:unpr while attempting to initialize uibModal

Switch the position of the Refer a friend button and the name button to the right

What can be done to stop a header from sticking to a table and displaying horizontally scrolling content along the border?

Expanding a class functionality by incorporating a method through .prototype

What could be causing the error message to appear stating that each list item must have a unique key when utilizing react-bootstrap in Nextjs?

Using jQuery for validation using a checkbox