Estoy tratando de crear un efecto en el que se desplaza sobre un enlace y la imagen en el fondo cambia según el enlace que se desplazó.
function changeImage(artistCover){ document.getElementById('slider').src = artistCover; } a { color:#ffffff; } a:hover { color: orange; } .imgArea { height:100vh; display:flex; justify-content:center; align-items:center; } .imgArea img { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .imgArea:before { content:""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index:0; } ul li { list-style-type: none; font-size: 24px;line-height: 2em; font-variant: small-caps;font-weight: bold; text-align:center; } <div class="imgArea"> <img src="destinyschild.jpeg" id="slider"> <div style="position:absolute;"> <ul> <li> <a href="#" onmouseenter="changeImage('https://weareaddition.com/wp-content/uploads/2022/05/destinyschild.jpeg')">Destiny's Child</a> </li> <li> <a href="#" onmouseenter="changeImage('https://weareaddition.com/wp-content/uploads/2022/05/littlemix.jpeg')">Little Mix</a> </li> <li> <a href="" onmouseenter="changeImage('https://weareaddition.com/wp-content/uploads/2022/05/Pele.jpeg')">Pele</a> </li> <li> <a href="#" onmouseenter="changeImage('https://weareaddition.com/wp-content/uploads/2022/05/chrisbrown.webp')">Chris Brown</a> </li> </ul> </div> </div>El código anterior funciona y reemplaza la imagen sin un efecto de desvanecimiento. ¿Qué necesito agregar/modificar para que funcione el efecto de fundido cruzado?
Aquí hay un ejemplo JSFiddle de mi script también. ¡Muchas gracias de antemano!