Zooming image onclick, but bg-col takes over img

Question

I am programming a website, where I have images of documents that I have to present to my clients. However, as the images are too small when viewed plainly from the website, I went to search for "onclick zoom" js/jq. I found this gem instead. But the problem now is that, I can view the zooming action, but image is unviewable after zooming.

Related scss:

section {
     position: relative;
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     scroll-snap-align: start;
}
 #particles-js3 {
     width: 100%;
     height: 100vh;
}
 .content {
     width: 100%;
     text-align: center;
     position: absolute;
     color: $darkft;
     pointer-events: none;
     height: 100vh;
     display: flex;
     flex-direction: column;
}
 .block {
     height: 75%;
     width: 85%;
     border-radius: 1em;
     margin: auto;
     background: $lightbgls;
     //Just a colour display: flex;
     backdrop-filter: blur(3px);
     justify-content: center;
     align-items: center;
}
 .wrapper {
     margin-top: 100px;
     padding-top: 150px;
     padding-bottom: 0%;
     position: relative;
     max-width: 90%;
     margin: 0 auto;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
 .card {
     height: auto;
     // top: 30px;
     position: sticky;
     border: 1px solid white;
     box-shadow: 0 0 20px 0px white;
     background-color: #141E30;
     backdrop-filter: blur(10px);
     color: #ffffff;
     padding: 40px;
     border-radius: 1em;
     margin-bottom: 50px;
     transition: ease-in-out 0.4s;

     &:hover {
                   transform: scale(1.04);
                   color: black;
                   background-color: #577ca7;
                   transition: ease-in-out 0.4s;
              }
}
 img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 img.card-img {
     position: static !important;
     width: 55%;
     border-radius: 1em;
     @media screen and (max-width: 500px) {
         width: 80%;
    }
}

Html code:

<body>
  <section id="Continuation">
    <div id="particles-js3">
      <div class="content">
        <h2 style="color: #535fbe;"> Continuation </h2>
        <div class="block" style="overflow: auto; pointer-events: auto; display: block;">
          <div class="wrapper">
            <div class="card">
              <h2>Atlassian</h2>
              <p>Atlassian software suite is a fairly new concept for most of us...</p>
              <img src="/Multimedia/146904bb-1ecd-4403-9ac7-dbcd85947275.webp" class="card-img img-zoomable">
              <img src="/Multimedia/a519159a-f85f-43aa-8eee-fe7be17f78ae.webp" class="card-img img-zoomable">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

Js (in html):

<script src="https://unpkg.com/zooming/build/zooming.min.js"></script>


<script>
        // Listen to images after DOM content is fully loaded
        document.addEventListener('DOMContentLoaded', function () {
            new Zooming({
                // options...
                bgColor: 'rgba(0,0,0,1)',
                customSize: '100%'
            }).listen('.img-zoomable')
        })
</script>

I used CDN and did as told in the documentation provided by the developers of this repo. However my images are still not fully "isolated" or zoomed. Here are some examples:

My code does what when hover:

My code does what when I click to "zoom" on image:

As you can see, after I clicked the image to zoom, I can view the zoom and translate part of the image, but then the whole screen turns black. I found out why this happened, cause of the bgColor: 'rgba(0,0,0,1)' in my zoom configuration. But that is supposed to be the background isn't it? I tried changing the opacity of it, to 0 , and it technically worked, with the background still visible. I also read the part in their github page that

Caveats / Limitations

Avoid working with fixed position images #34. Image won't be visible after zoom-in if any parent element has style overflow: hidden #22 .

I tried the alternative of removing the existing overflow: ___ scss from all parent, but the image turned out to be still hidden behind the background somehow. Does anyone know what I am doing wrong, and how could I resolve this issue?

Answer 1

I think the css is a bit messy. When you look into the dev tools you can see a lot of them are not being taken into consideration and some of the css is unnecessary. I cleaned up a bit and I can see the image being zoomed in:

https://codepen.io/polinq/pen/yLKNggV

I don't know how much is this of a help but I am pretty sure once you clean up the code (maybe start from scratch) you will be able to see the images working as expected.

.card {
    border: 1px solid white;
    background-color: #141E30;
    color: #ffffff;
    padding: 40px;
    border-radius: 1em;
    margin-bottom: 50px;
}

.wrapper {
    padding-top: 150px;
    max-width: 90%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.block {
    height: 75%;
    width: 85%;
    border-radius: 1em;
    margin: auto;
    overflow: auto;
    pointer-events: auto;
    display: block;
}

h2 {
    text-align: center;  
}

.content {
    text-align: center;
    color: $darkft;
    pointer-events: none;
}

.particles-js3 {
    height: 100vh;
    width: 100%;
}

.card-img {
    width: 55%;
    border-radius: 1em;
}