I can't get an image to appear when hovering on another image, Cargo

Issue

I'm having issues trying to make an image {image 16} appear when hovering on another image with a link {image 15}. I'm building my website on Cargo, as I don't know much about coding. This site-builder is limiting my options to only place my images in grids, and as these grids already have a div class each, i can't get Cargo to accept the div classes im making for each image- probably because i'm doing it wrong. To top it all off, Cargo doesn't allow me to see all of the HTML, just specific parts. Any help would be super welcomed, thank you in advance!

HTML:

<div class="image-gallery" gid="21">

<div class="hover-image">{image 16}</div>

</div> <br>

<br><br>
<br>
<div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
    <div grid-col="x12" grid-pad="0"></div>
</div><br>
<div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
    <div grid-col="x12" grid-pad="0"><div style="text-align: left"><div class="image-gallery" gid="22">

<div class="hover-title">
<a rel="history" href="enlightened-type" class="image-link">{image 15}</a>
</div>

{image 5}
{image 13}
{image 14}
{image 12}
{image 11}
</div><br></div>
</div>
</div>
<br><div class="image-gallery" gid="23">
{image 17}
</div>2

CSS:

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    visibility: hidden;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
}

.hover-image {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}

Solution

You're going to need some javascript.

Add an id to image16

<div class="hover-image" id="myhoverimage">{image 16}</div>

Add some event listeners to image15

 <a rel="history" href="enlightened-type" onmouseover="showImg()" onmouseout="hideImg()" class="image-link">{image 15}</a>

The Javascript. (Put at the bottom of your html)

  <script>

    var hoverImg = document.getElementById("myhoverimage");

    function showImg(x) {
      hoverImg.style.visibility = "visible";
    }

    function hideImg(x) {
      hoverImg.style.visibility = "hidden";
    }

  </script>

Answered By - ShanieMoonlight