Question 46156 in CSS Question posted in
Some basic documentation can be found here.

CSS: on hover change gradient but keep background picture

I have a parent-div with css-class "a" and a child-div with css-class "b". b sits within a. b has a background picture with a gradient on top.

What I want to achieve:
When hovering over a change the gradient of b but don’t change the background picture.

This is what I have:

<html>
<head>
<style>
.b{
 background-image: linear-gradient(90deg,rgba(255,255,255,1) 8%,rgba(6,89,168,) 99%), url(https://path/to/image.jpg !important;
}
.a:hover .b{
 background-image: linear-gradient(90deg,rgba(0,0,0,1) 8%,rgba(30,30,30,50) 99%) !important;
} 
</style>
</head>

<body>
<div class="a">
 <div class="b">
 </div class="a">
</div class="a">
</body>
</html>

However this code makes the background picture disappear on hover which I don’t want.
For structural reasons I want to avoid repeating the image-url in the hover part of the CSS code (which would be the obvious solution).
So I’m looking for CSS that says: On hover change the gradient while leaving the background image untouched. Is that possible?

Thanks,
Julius

Tags:

2

Answers


  1. 0

    Before accessing the code snippet there are a couple of things you need to pay attention to as it will make your code stop working. To begin with:

    <div class="a">
<div class="b">
</div class="a">
</div class="a">

    Don’t do this! Classes are added on the opening part of the tag. Nothing goes into the closing part. Furthermore, in your case, you don’t close the b div and close the a div twice which is a mess and no css, no matter how well written will be rendered. It needs to be like this:

    <div class="a">
<div class="b"></div>
</div>

    Secondly, here:

    background-image: linear-gradient(90deg,rgba(255,255,255,1) 8%,rgba(6,89,168,) 99%), url(https://path/to/image.jpg !important;

    You forgot to add opacity for the last color and when using url(), the URL needs to be inside quotation marks; and you need to close the brackets. Also, don’t spam !important. They’ll end up cancelling each other. And if you MUST use it for some reason, don’t add it inside the brackets; it’s always at the end, outside any value;

    That part should look like this:

    background-image: linear-gradient(90deg,rgba(255,255,255,1) 8%,rgba(6,89,168,1) 99%), url("https://path/to/image.jpg") [!important goes here if it is a must for whatever reason];

    Before worrying about "structural reasons", make sure you write things properly.

    Last but not least, when you write a different background-image value for the hover you pretty much overwrite it for the non hovered element. As such, you need to write the original and only modify what you want changed – in your case, the gradient.

    Based on what you wrote I think this is what you want done. Check the code snippet. I’ve added borders and made the elements large so you understand how it works. Feel free to change sizes/borders as it suits you.

    .a {
  width: 400px;
  height: 400px;
  border: 1px solid green;
}

.b{
  border: 1px solid red;
  margin: 100px auto;
 background-image: linear-gradient(90deg,rgba(255,255,255,1), 8%,rgba(6,89,168, 1) 99%), url("https://images.pexels.com/photos/11785073/pexels-photo-11785073.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 200px;
  width: 200px;
}
.a:hover .b{
 background-image: url("https://images.pexels.com/photos/11785073/pexels-photo-11785073.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"), linear-gradient(90deg,rgba(0,0,0,0) 8%,rgba(30,30,30,1) 99%);
 
} 
    <div class="a">
 <div class="b"></div>
</div>
    Login or Signup to reply.
  2. 0

    With the snippet provided I would suggest that .a should have the gradient and on :hover just add the image to .b.

    If this is not an option I would say to add a wrapper to .b and follow the steps I first suggest but with the wrapper instead of .a.

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search