Change background color of an element when hover on other element (slowly)

Question

I need to change .main linear gradient top color when hovering over .child elements to the .child element color but slowly (like Spotify)

I created a Spotify clone (https://spotify.dinujaya.me/) but I can't figure out how to change top color when hovering over other elements.




    
    
    
    Document

user_19169401 · Answer

you can do this by adding a new class for your .main, for example:

.red{
  background:red; /* background color you need */
  transition: background 1.0s ease-in; /*transition speed */ 
}

and then add a jQuery function to your code, that will change .main background or just add/remove a class with your new bg color. For example:

$(".child").mouseover(function(){
  $('.main').addClass("red");
});

$(".child").mouseout(function(){
  $('.main').removeClass("red");
});

user_8565010 · Answer

So I've ALMOST got it but the fade on mouseout is giving me trouble. As stated, you can't transition background-image and linear-gradients can't be transitioned BUT they can be animated! So here's the workaround I came up with:

I put all of your content into a container for positioning and alignment purposes. Then, I separated the child buttons from everything else and put your starter background into a container behind everything. From there, I established a class for each type of gradient change that you wanted (since you only wanted to change the top color) and assigned ids to each child that I could call in javascript to add the class as well as the gradient animation. I also added a slightly different shade of blue so you could actually see that transition occur otherwise that button wouldn't appear to do much. So it works except that when you mouse out the animation isn't smooth. That's the part I'm still trying to work through. I've tried adding another class (gradientOut) but it doesn't seem to be doing what I want just yet.

let gradientOverlay = document.getElementById('gradientOverlay');
let gradient = document.getElementsByClassName('gradient');

let red = document.getElementById('red');
red.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('redG');
  gradientOverlay.classList.add('gradient');
});
red.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('redG');
  gradientOverlay.classList.remove('gradient');
});

let blue = document.getElementById('blue');
blue.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('blueG');
  gradientOverlay.classList.add('gradient');
});
blue.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('blueG');
  gradientOverlay.classList.remove('gradient');
});

let green = document.getElementById('green');
green.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('greenG');
  gradientOverlay.classList.add('gradient');
});
green.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('greenG');
  gradientOverlay.classList.remove('gradient');
});

let black = document.getElementById('black');
black.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('blackG');
  gradientOverlay.classList.add('gradient');
});
black.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('blackG');
  gradientOverlay.classList.remove('gradient');
});

let pink = document.getElementById('pink');
pink.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('pinkG');
  gradientOverlay.classList.add('gradient');
});
pink.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('pinkG');
  gradientOverlay.classList.remove('gradient');
});

let brown = document.getElementById('brown');
brown.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('brownG');
  gradientOverlay.classList.add('gradient');
});
brown.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('brownG');
  gradientOverlay.classList.remove('gradient');
});

:root {
  --red: #ff5656f8;
  --blue: #00ffea;
  --green: #6cff7f;
  --black: #353535;
  --pink: #ff2fff;
  --brown: #8b0000;
  --backgroundTopBlue: #0cf0de;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: 100vh;
}

.mainContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  padding: 0px;
  margin: 0 auto;
  z-index: 2;
  width: 940px;
  height: 240px;
}

.main {
  display: flex;
  background-image: linear-gradient(to bottom, var(--backgroundTopBlue), blue);
  padding: 0px;
  margin: 0 auto;
  border-radius: 10px;
  z-index: 0;
  width: 940px;
  height: 240px;
}

.childContainer {
  display: flex;
  align-items: center;
  justify-items: center;
  padding: 0px;
  margin: 0 auto;
  z-index: 1;
}

.gradientOverlay {
  display: block;
  position: absolute;
  margin: 0 auto;
  width: 940px;
  height: 240px;
  background-image: linear-gradient(to bottom, var(--backgroundTopBlue), blue);
  border-radius: 10px;
  opacity: 0;
  z-index: 0;
}

.child {
  width: 100px;
  height: 100px;
  margin: 20px;
  z-index: 2;
}

#red {
  background-color: var(--red);
}

#blue {
  background-color: var(--blue);
}

#green {
  background-color: var(--green);
}

#black {
  background-color: var(--black);
}

#pink {
  background-color: var(--pink);
}

#brown {
  background-color: var(--brown);
}

.redG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--red), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.blueG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--blue), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.greenG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--green), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.blackG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--black), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.pinkG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--pink), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.brownG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--brown), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.gradient {
  animation: gradient 1s ease-in forwards;
}

@keyframes gradient {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.gradientOut {
  animation: gradientOut 1s ease-out forwards;
}

@keyframes gradientOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

user_18457392 · Answer

I created my own answer

css

:root{
    --red: #ff5656f8;
    --blue: #00ffea;
    --green: #6cff7f;
    --black: #353535;
    --pink: #ff2fff;
    --brown: #8b0000;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100vh;
}
.bg{
    background-color: rgb(0, 55, 92);
    border-radius: 10px;
    overflow: hidden;
    transition: background 0.5s linear;
}
.main{
    display: flex;
    background-image: linear-gradient(to bottom, transparent, blue);
    padding: 50px;

}
.child{
    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: green;
}

HTML




    
    
    
    Document

javaScript

let background = document.getElementById('background');

document.getElementById('child_1').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--red)'
})
document.getElementById('child_1').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

document.getElementById('child_2').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--blue)'
})
document.getElementById('child_2').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

document.getElementById('child_3').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--green)'
})
document.getElementById('child_3').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

document.getElementById('child_4').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--black)'
})
document.getElementById('child_4').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

document.getElementById('child_5').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--pink)'
})
document.getElementById('child_5').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

document.getElementById('child_6').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--brown)'
})
document.getElementById('child_6').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

Change background color of an element when hover on other element (slowly)

3 Answers