En una función, lo que hago es cambiar el color de fondo con respecto al desplazamiento de la tarjeta. En este Código, solo necesito una función para cuando pase el mouse sobre la tarjeta, la imagen se mostrará en el fondo
imagen de bicicleta = color de fondo
**Utilice solo una función para todas las imágenes que cambian de fondo según la tarjeta **
Mi código comienza aquí
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>