display this when right click on an image

1 answer

I tried to create a website to display each product with an image, but I want to disable it to users to download the image's product when the user right-click on it, he/she can't to download it or Open the image on new tab to download, I read many questions on StackOverflow about it but nothing tells me how to do it. I want to display this box which on the below image appears. enter image description here

please help me.

Received answer to this question:
The best answer according to the author of the question:

Just cover your image like this

<!DOCTYPE html> <html lang="en-us"> <head>   <title>some title</title>   <style>     * {       box-sizing: border-box;     }     .img-container {       width: 300px;       height: 200px;       position: relative;     }     .img-container img, .img-container .img-cover {       width: 100%;       height: 100%;     }     .img-container .img-cover {       position: absolute;       top: 0;       left: 0;     }   </style> </head> <body>    <div class="img-container">     <img src="your_image.png">     <div class="img-cover"></div>   </div>  </body> </html>