How can I combine these classes

[facarroll]

I have a web page that loads images with a modal, and at the same time is meant to inhibit image piracy by delivering a transparent overlay when a user attempts to make a screen copy of the image.
I have two php lines of image scripts which work OK independently, but when I attempt to combine them into one div, only script one will work. You can see that I've commented out the second image here (which delivers the transparent overlay) and the first image (which creates the modal) then works, and vice versa but I want to use them both at the same time. How can they be successfully combined?
It is unsuccessful if I do class="first second modal-target "

<style>
.modal-target {
    width: 390px;
    /* sets the width of the image */
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
</style>


<style>
.first {
    position: relative;
}

.second {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="first">
<!-- the following line delivers some images and their title to the web page -->
    <img class="modal-target" src="<?php echo $file_source; ?>" &nbsp;&nbsp;&nbsp; alt="<?php echo $title; ?>" width="400">
 <!-- the following line prevents a user from copying the image from the webpage -->
<img class="second" src='../images/Copyright.gif' alt='This image is copyright'>
</div>
<!-- there are further scripts including some php and javascript related to the modal but as the modal works OK I haven't included them here -->

[rproffitt]

Are you sure that works? Let's see a working page so I can see if I can use my usual tools to download images.
Basically if you show an image, I can download it. Folk have tried for years to block such but I haven't seen any system to worked.

[facarroll]

With modal
Click Here
With image block
[Click Here

Because the page is scripted for lazy loading, I've only included script which deals with the first two images on the page. Easy enough to implement for all the images. I just haven't bothered in this instance.

[rproffitt]

Is this not downloadable? It was here on Firefox.

PS: Not a screenshot.

[facarroll]

I'm using Chrome, but you should not be able to download from the "image block" page but only from the "modal page" page.

[rproffitt]

I didn't have to resort to any tools in my collection. Hopefully someone will look over your code and question request.

[AndreRet]

The given code does not really alter anything regarding protection of the code... It just gives am "alt" alternative to an image so the code is not stopping a user from copying the scree, which in its own is a whole different discussion on how to stp it, I will not even try and go into that jubgle as you now have to control/manage a users pc and not a web page.

To stop a user from right click and "save image as" you can use the following sample -

<style>
    .modal-target {
        width: 390px;
        /*sets the width of the image... */
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        position: relative;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /*Adjust the alpha value for transparency... */
        display: none;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .overlay-text {
        color: #fff;
        font-size: 18px;
    }
</style>

<script>
//PHP will not help here as it is server based, already delivered the image for viewing...
    document.addEventListener('contextmenu', function (e) {
        //Prevent the default right-click context menu...
        e.preventDefault();

        //Show the overlay when right-clicking...
        document.querySelector('.overlay').style.display = 'flex';
    });

    document.addEventListener('DOMContentLoaded', function () {
        //Hide the overlay initially///
        document.querySelector('.overlay').style.display = 'none';
    });
</script>

<div class="modal-target">
    <!-- the following line delivers some images and their title to the web page -->
    <img class="modal-target-image" src="<?php echo $file_source; ?>" alt="<?php echo $title; ?>" width="400">
    <!-- the following line prevents a user from copying the image from the webpage -->
    <img class="second" src='../images/Copyright.gif' alt='This image is copyright'>
    <!-- Overlay div to prevent image download -->
    <div class="overlay">
        <p class="overlay-text">Image protected. Right-click disabled.</p>
    </div>
</div>


This might point you in the right direction...