background-image transition for div on hover is not working

Question

I have a div that I want to have a transition effect on hover.

I put together the following CSS code, but the transition is not working in chrome nor firefox.

#header {
    border: 0.1px solid #666;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    height: 10vh;
    padding: 0;
    transition: background-image 1s ease-in-out; /* NOT WORKING */
    -webkit-transition: background-image 1s ease-in-out; /* NOT WORKING */
  }
  
  #header:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.0));

   }

<html>
<body>
<div id="header"> this is my header</div>
</body>
</html>

Am I doing anything wrong?

Would be great if anyone could help!!

Many thanks

https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds — Temani Afif, Jan 13 '18 at 22:26

sol · Accepted Answer · 2018-01-13T22:50:32.520

1

CSS gradients do not support the transition property.

In your case, you can create a similar effect by using a pseudoelement and transitioning its opacity on hover instead.

#header {
  border: 0.1px solid #666;
  height: 10vh;
  padding: 0;
  position: relative;
}

#header:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  transition: opacity 1s ease-in-out;
  background: linear-gradient(black, transparent);
}

#header:hover:before {
  opacity: .75;
}

.logo {
  color: white;
  position: relative;
}

<div id="header"><div class="logo">LOGO</div></div>

edited Jan 13 '18 at 22:50

answered Jan 13 '18 at 22:22

sol

22,311
6
42
59

1

you sould then remove the opacity from gradient as you are using opacity on the element ;) – Temani Afif Jan 13 '18 at 22:25
@sol this almost works. The only problem is that I have a logo text in my header and the pseudo element seems to lay over the white text, while I just need the background to do the transition. I already tried to set the div of the logo (in the header) to a higher z-index, but that didnt have any effect. – AlphaX Jan 13 '18 at 22:48
@AlphaX don't forget to add postion relative to logo to be able to use z-index – Temani Afif Jan 13 '18 at 22:49
@AlphaX I've updated the snippet with a guess as to your markup. You can simply add `position: relative` to create a new stacking context for the logo. – sol Jan 13 '18 at 22:51
@sol Yes that did the trick!!! THANK YOU SO MUCH !!!! It's weird, because it also works without the z-index as long as you set the position to relative!? – AlphaX Jan 13 '18 at 22:57

background-image transition for div on hover is not working

1 Answers1