CSS fading-transition background: linear gradient, does not work-CodePudding

A simple html element with CSS background linear-gradient.

Goal: Fade background on hover. Does not work (with transition background), see example below - Why?

ui-accordion-header {
  border: 0 none;
    font-size: 100%;
    line-height: 1.3;
    list-style: none outside none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
}

.mx-accordion h1 {
    background: linear-gradient(0deg, rgba(227,227,227,1) 20%, rgba(247,247,247,1) 100%);
    border: 1px solid #e3e3e3;
    border-width: 0 0 1px;
    color: #000;
    padding: 7px 10px;
    margin: 0px;
    
    transition: background .2s ease-in-out;
}

.mx-accordion h1:not(.ui-state-active):hover {
    background: linear-gradient(0deg, #e1ebff 20%, #e1ebff 100%);
    cursor: pointer;
    color: #027BFF;
}

<div id="accordion"  role="tablist">


<h1  role="tab" id="ui-id-4" aria-controls="my-filters" aria-selected="false" aria-expanded="false" tabindex="-1"><span ></span>
        <a href="#">My Text</a>
    </h1>
  
  </div>

CodePudding user response：

Transitioning gradients is not supported, as explained here.

A workaround could be, transition the background-position and scaling the background. This way we can achieve something very similar.

div {
  background-image: linear-gradient(0deg, #e1ebff 0%, #e1ebff 25%, rgba(227, 227, 227, 1) 75%, rgba(247, 247, 247, 1) 100%);
  padding: 7px 10px;
  background-size: 100% 400%;
  background-position: 100% 0%;
  transition: .2s;
}

div:hover {
  background-position: 100% 100%;
}

<div>Lorem ipsum</div>

CodePudding user response：

While gradient images do not transition in the same way as say background-color, you can transition opacity and that would seem to be what you want as you mention fade.

Of course, you dont want to alter the opacity of the whole element, so this snippet adds the two backgrounds in pseudo before and after elements and transitions the opacities of those.

.ui-accordion-header {
  border: 0 none;
  font-size: 100%;
  line-height: 1.3;
  list-style: none outside none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  text-decoration: none;
}

.mx-accordion h1 {
  border: 1px solid #e3e3e3;
  border-width: 0 0 1px;
  color: #000;
  padding: 7px 10px;
  margin: 0px;
  position: relative;
}

.mx-accordion h1:not(.ui-state-active):hover {
  cursor: pointer;
  color: #027BFF;
}

.mx-accordion h1::before,
.mx-accordion h1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  z-index: -1;
  transition: opacity .2s ease-in-out;
}

.mx-accordion h1::before {
  background: linear-gradient(0deg, rgba(227, 227, 227, 1) 20%, rgba(247, 247, 247, 1) 100%);
  opacity: 1;
}

.mx-accordion h1:hover::before {
  opacity: 0;
}

.mx-accordion h1::after,
.mx-accordion h1:not(.ui-state-active)::after {
  background: linear-gradient(0deg, #e1ebff 20%, #e1ebff 100%);
  opacity: 0;
}

.mx-accordion h1:not(.ui-state-active):hover::after {
  opacity: 1;
}

<div id="accordion"  role="tablist">


  <h1  role="tab" id="ui-id-4" aria-controls="my-filters" aria-selected="false" aria-expanded="false" tabindex="-1"><span ></span>
    <a href="#">My Text</a>
  </h1>

</div>