Radial gradient background not transitioning properly

Question

On hover, I can't get the background to transition from 0 opacity to 0.6 on hover. Here is my CSS:

.work--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient( rgba(64,56,43,0), rgba(0,0,0,0), rgba(0,0,0,0));
    opacity: 1;
    z-index: 1;
    transition: background 0.3s ease-in-out;
}

    .work--overlay:hover {
        background: radial-gradient( rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
        transition: background 0.3s ease-in-out;
    }

I should also mention that the effect does work on hover, just the transition ease part isn't working. So I'm 99% sure this is a CSS thing.

Possible duplicate of [Use CSS3 transitions with gradient backgrounds](https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) — Obsidian Age, Jul 02 '17 at 21:40

score 0 · Answer 1 · answered Jul 02 '17 at 22:00

I ran into this problem before. I added a ::before pseudo class to transition the opacity not the background. Basically you create a before class that sits below the actual class (see changes to position and z-index). Then when it hovers it makes the layer visible.

.work--overlay {
  position: relative;
  z-index: 50;

    width: 100%;
    height: 100%;
    background: radial-gradient( rgba(64,56,43,0), rgba(0,0,0,0), rgba(0,0,0,0));

    transition: opacity 0.3s ease-in-out;
}

.work--overlay:before {
          background: radial-gradient( rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
    top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -100;
  position: absolute;
  content: '';
  opacity: 0;
  transition: opacity 3s ease-in-out;
}


    .work--overlay:hover:before {
       opacity:1;
    }

score 0 · Accepted Answer · answered Jul 02 '17 at 23:16

0

did some changes to your code, mainly for opacity and removed transition from hover state:

 ...

    opacity: 0;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

    .work--overlay:hover {
      opacity:1;
      background: radial-gradient( rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
    }

here is fiddle with a working transition: https://jsfiddle.net/g6a0b2zg/

answered Jul 02 '17 at 23:16

Rachel Nicolas

995
2
12
20

This doesn't work for me since there are child elements that are having their opacities changed on other hovers. – J.Doe Jul 03 '17 at 00:40
in this case, is there any chance you can specify background color for non hover state? updated sample https://jsfiddle.net/g6a0b2zg/1/ – Rachel Nicolas Jul 03 '17 at 17:35
I sort of used your answer to fix it. I ended up having on hover change the opacity to 1, however the gradient background's opacity is set at 0.6. So when the background goes to 100% opacity, it's actually 60%. Thanks : ) – J.Doe Jul 16 '17 at 15:03

Radial gradient background not transitioning properly

2 Answers2