In one Function What I do change different color of background regarding on card hover. In this Code I need only one function for when hover on card then image is display on background
bicycle image = color on background
**Use Only one Function For All Images changing on background according to card **
My Code Is Started Here
const allcards = document.querySelectorAll('.card-inner .card');
for (i = 0; i < allcards.length; i++) {
allcards[i].addEventListener('mouseover', function() {
const image = document.querySelectorAll('.card-inner .img');
for (j = 0; j < image.length; j++) {
image[j].style.opacity = "100%";
}
});
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.contaner {
border: 2px solid red;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
position: absolute;
z-index: 999;
}
.card {
border: 2px solid red;
margin: 20px;
width: 100px;
height: 100px;
}
.img {
border: 5px solid black;
z-index: -1;
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
opacity: 0%;
transition: 1s;
}
.img1 {
background-color: green;
}
.img2 {
background-color: red;
}
.img3 {
background-color: blue;
}
.img4 {
background-color: yellow;
}
.card-inner {
border: 2px solid red;
}<div class="contaner">
<div class="card-inner">
<div class="img1 img"></div>
<div class="card1 card">
</div>
</div>
<div class="card-inner">
<div class="img2 img"></div>
<div class="card2 card">
</div>
</div>
<div class="card-inner">
<div class="img3 img"></div>
<div class="card3 card">
</div>
</div>
<div class="card-inner">
<div class="img4 img"></div>
<div class="card4 card">
</div>
</div>
</div>