title: I can't get an image to appear when hovering on another image, Cargo
body: <p>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!</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;image-gallery&quot; gid=&quot;21&quot;&gt;
  
  &lt;div class=&quot;hover-image&quot;&gt;{image 16}&lt;/div&gt;
  
  &lt;/div&gt; &lt;br&gt;
  
  &lt;br&gt;&lt;br&gt;
  &lt;br&gt;
  &lt;div grid-row=&quot;&quot; grid-pad=&quot;0&quot; grid-gutter=&quot;0&quot; grid-responsive=&quot;&quot;&gt;
      &lt;div grid-col=&quot;x12&quot; grid-pad=&quot;0&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div grid-row=&quot;&quot; grid-pad=&quot;0&quot; grid-gutter=&quot;0&quot; grid-responsive=&quot;&quot;&gt;
      &lt;div grid-col=&quot;x12&quot; grid-pad=&quot;0&quot;&gt;&lt;div style=&quot;text-align: left&quot;&gt;&lt;div class=&quot;image-gallery&quot; gid=&quot;22&quot;&gt;
  
  &lt;div class=&quot;hover-title&quot;&gt;
  &lt;a rel=&quot;history&quot; href=&quot;enlightened-type&quot; class=&quot;image-link&quot;&gt;{image 15}&lt;/a&gt;
  &lt;/div&gt;
  
  {image 5}
  {image 13}
  {image 14}
  {image 12}
  {image 11}
  &lt;/div&gt;&lt;br&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;div class=&quot;image-gallery&quot; gid=&quot;23&quot;&gt;
  {image 17}
  &lt;/div&gt;2
  </code></pre>
  <p>CSS:</p>
  <pre><code>.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;
  }
  </code></pre>