The gradient should smoothly appear at the background of the element and smoothly disappear. I can't add the transition property with JS

Question

const card = document.querySelectorAll('.process__card');
card.forEach(cardItem => {
  cardItem.addEventListener('mouseover', animationBackround);
  cardItem.addEventListener('mouseout', animationBackround);
});

function animationBackround(event) {
  const eventType = event.type;

  const target = event.target.closest('.process__card');

  if (!target) return;

  if (eventType === 'mouseover') {
    let color1 = getRandomColor();
    let color2 = getRandomColor();
    target.style.background = `linear-gradient(45deg, ${color1}, ${color2})`;
  }

  if (eventType === 'mouseout') {
    target.style.background = 'none';
  }

}

function getRandomColor() {
  const letters = '01234567890ABCDEF';
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }

  return color;
}

.process {
  padding-top: 140px;
}

.process__wrapper {
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  gap: 30px;
  width: 1234px;
}

.process__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F3F3F3;
  height: 159px;
  border-radius: 45px;
  border: 1px solid #191A23;
  box-shadow: 0 5px 0 0 #191A23;
  transition: 0.5s all;
}

.process__card_active {
  height: 279px;
}

<div class="process__card">
  <div class="process__content">
    <div class="process__lable">01<span>Consultation</span>
    </div>
    <div class="process__plus"></div>
  </div>
  <div class="process__subcontent process__subcontent_hidden">
    <hr>
    <div class="process__descrp">During the initial consultation, we will discuss your business goals and objectives, target audience, and current marketing efforts. This will allow us to understand your needs and tailor our services to best fit your requirements.</div>
  </div>
</div>

It is necessary that with the help of JS the gradient gradually appears at the background of the element and smoothly disappears. I can't add the transition property with JS.

[Very likely dupe](https://stackoverflow.com/questions/4697758/prevent-onmouseout-when-hovering-child-element-of-the-parent-absolute-div-withou) — mplungjan, Aug 15 '23 at 09:30
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Aug 15 '23 at 13:58

score 0 · Answer 1 · answered Aug 15 '23 at 09:37

You can't transition a background-image. Instead add an extra div to which you apply the background. Now you can smoothly transition its opacity while hovering.

const card = document.querySelectorAll('.process__card');
card.forEach(cardItem => {
  cardItem.addEventListener('mouseover', animationBackround);
  cardItem.addEventListener('mouseout', animationBackround);
});

function animationBackround(event) {
  const eventType = event.type;

  const target = event.target.closest('.process__bg');

  if (!target) return;

  if (eventType === 'mouseover') {
    let color1 = getRandomColor();
    let color2 = getRandomColor();
    target.style.background = `linear-gradient(45deg, ${color1}, ${color2})`;
  }

  if (eventType === 'mouseout') {
    setTimeout(() => {
      target.style.background = 'none';
    }, 250) // Time must match CSS transition
  }

}

function getRandomColor() {
  const letters = '01234567890ABCDEF';
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }

  return color;
}

.process {
  padding-top: 140px;
}

.process__wrapper {
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  gap: 30px;
  width: 1234px;
}

.process__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F3F3F3;
  height: 159px;
  border-radius: 45px;
  border: 1px solid #191A23;
  box-shadow: 0 5px 0 0 #191A23;
  transition: 0.5s all;
  position: relative;
  overflow: hidden;
}

.process__card:hover .process__bg {
  opacity: 1;
}

.process__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.process__bg ~ * {
  position: relative;
}

<div class="process__card">
  <div class="process__bg"></div>

  <div class="process__content">
    <div class="process__lable">01<span>Consultation</span>
    </div>
    <div class="process__plus"></div>
  </div>
  <div class="process__subcontent process__subcontent_hidden">
    <hr>
    <div class="process__descrp">During the initial consultation, we will discuss your business goals and objectives, target audience, and current marketing efforts. This will allow us to understand your needs and tailor our services to best fit your requirements.</div>
  </div>
</div>

The gradient should smoothly appear at the background of the element and smoothly disappear. I can't add the transition property with JS

1 Answers1