I'm trying to create an effect where you hover over a link and the image in the backgound changes depending on which link was hovered.
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>The above code works and replaces the image without a fade effect. What do I need to add/modify to get the crosfade effect to work?
Here's a JSFiddle example of my script as well. Many thanks in advance!