How to fix my zoom-in/zoom-out functionality for list of images with captions

Question

So I'm trying to improve a zoom-in/zoom-out functionality for UI of an open source python package I created. I'm terrible when it comes to HTML but I managed to create something I'm almost satisfied with:

            
        <style>
        #ipyplot-imgs-container-div-5vg6HZLHkT2DZ6b324AEzT {
            width: 100%;
            height: 100%;
            margin: 0%;
            overflow: auto;
            position: relative;
            overflow-y: scroll;
        }

        div.ipyplot-placeholder-div-5vg6HZLHkT2DZ6b324AEzT {
            width: 250px;
            display: inline-block;
            margin: 3px;
            position: relative;
        }

        div.ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT {
            width: 250px;
            background: white;
            display: inline-block;
            vertical-align: top;
            text-align: center;
            position: relative;
            border: 2px solid #ddd;
            top: 0;
            left: 0;
        }

        div.ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT span.ipyplot-img-close {
            display: none;
        }

        div.ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT span {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        div.ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT img {
            width: 250px;
        }

        div.ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT span.ipyplot-img-close:hover {
            cursor: zoom-out;
        }
        div.ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT span.ipyplot-img-expand:hover {
            cursor: zoom-in;
        }

        div[id^=ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT]:target {
            transform: scale(2.5);
            transform-origin: left top;
            z-index: 5000;
            top: 0;
            left: 0;
            position: absolute;
        }

        div[id^=ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT]:target span.ipyplot-img-close {
            display: block;
        }

        div[id^=ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT]:target span.ipyplot-img-expand {
            display: none;
        }
        </style>
    <div id="ipyplot-imgs-container-div-5vg6HZLHkT2DZ6b324AEzT">
    <div class="ipyplot-placeholder-div-5vg6HZLHkT2DZ6b324AEzT">
        <div id="ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT-czzeT8CuejkLN6i6ixA2ir" class="ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT">
            <h4 style="font-size: 12px; word-wrap: break-word;">0</h4>
            <h4 style="font-size: 9px; padding-left: 10px; padding-right: 10px; width: 95%; word-wrap: break-word; white-space: normal;">https://raw.githubusercontent.com/karolzak/boxdetect/master/images/checkboxes-details.jpg</h4><img src="https://raw.githubusercontent.com/karolzak/boxdetect/master/images/checkboxes-details.jpg"/>
            <a href="#!">
                <span class="ipyplot-img-close"/>
            </a>
            <a href="#ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT-czzeT8CuejkLN6i6ixA2ir">
                <span class="ipyplot-img-expand"/>
            </a>
        </div>
    </div>
    
    <div class="ipyplot-placeholder-div-5vg6HZLHkT2DZ6b324AEzT">
        <div id="ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT-hXrSUY8QiFppJvoCT2jL8j" class="ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT">
            <h4 style="font-size: 12px; word-wrap: break-word;">1</h4>
            <h4 style="font-size: 9px; padding-left: 10px; padding-right: 10px; width: 95%; word-wrap: break-word; white-space: normal;">https://raw.githubusercontent.com/karolzak/boxdetect/master/images/checkboxes-details.jpg</h4><img src="https://raw.githubusercontent.com/karolzak/boxdetect/master/images/checkboxes-details.jpg"/>
            <a href="#!">
                <span class="ipyplot-img-close"/>
            </a>
            <a href="#ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT-hXrSUY8QiFppJvoCT2jL8j">
                <span class="ipyplot-img-expand"/>
            </a>
        </div>
    </div>
    
    <div class="ipyplot-placeholder-div-5vg6HZLHkT2DZ6b324AEzT">
        <div id="ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT-5gMDdDzQRq4USnW5E2xkPU" class="ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT">
            <h4 style="font-size: 12px; word-wrap: break-word;">2</h4>
            <h4 style="font-size: 9px; padding-left: 10px; padding-right: 10px; width: 95%; word-wrap: break-word; white-space: normal;">https://raw.githubusercontent.com/karolzak/boxdetect/master/images/checkboxes-details.jpg</h4><img src="https://raw.githubusercontent.com/karolzak/boxdetect/master/images/checkboxes-details.jpg"/>
            <a href="#!">
                <span class="ipyplot-img-close"/>
            </a>
            <a href="#ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT-5gMDdDzQRq4USnW5E2xkPU">
                <span class="ipyplot-img-expand"/>
            </a>
        </div>
    </div>
    
    <div class="ipyplot-placeholder-div-5vg6HZLHkT2DZ6b324AEzT">
        <div id="ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT-gm7YdJqQb9sBtxYYSysmww" class="ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT">
            <h4 style="font-size: 12px; word-wrap: break-word;">3</h4>
            <h4 style="font-size: 9px; padding-left: 10px; padding-right: 10px; width: 95%; word-wrap: break-word; white-space: normal;">https://raw.githubusercontent.com/karolzak/boxdetect/master/images/checkboxes-details.jpg</h4><img src="https://raw.githubusercontent.com/karolzak/boxdetect/master/images/checkboxes-details.jpg"/>
            <a href="#!">
                <span class="ipyplot-img-close"/>
            </a>
            <a href="#ipyplot-content-div-5vg6HZLHkT2DZ6b324AEzT-gm7YdJqQb9sBtxYYSysmww">
                <span class="ipyplot-img-expand"/>
            </a>
        </div>
    </div>
    </div>
        

The problem with current approach is that h4 text fields are hidden under invisible overlay element that I use as zoom-in/zoom-out trigger. Because of that, users can't select and copy text from h4 control.

What I'd like to achieve is to make zoom-in/zoom-out functionality available only when clicking at the image directly and allow users to select text from above the image at any time.