How can I combine these classes

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 -->