Create Fade In/Out with Javascript

I have grid class in javascript and when hover on some areas, an different image displays. I want this image to fade in/ fade out when displayed. Hereby an exemple of the effect (could't figure out how it was made) :

I am not sure how I should do it, as I am not directly using the CSS :hover . Any leads ?

#displayedimage {
display: none;
position: absolute;
width: 30%;

JS for (let i = 0; i < hovergrid.length; i++) {

    if (hovergrid[i].hover(mouseX, mouseY)) {
        console.log("hover on " + i)



display(number) {

   this.img = document.getElementById("displayedimage") = "block"
    this.img.src = "images/" + number + ".jpg" = this.posx + "px" = this.posy + "px"
    this.img.alt = picdes[number]

Read more here:

Content Attribution

This content was originally published by vermar at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: