Hey Readers!

Images are used in web pages to make them look more interactive and appealing. We must have surely noticed a thing about images. When you click on an image and drag it, there is a semi-transparent image that follows the mouse till you hold it down. This is called the ghost image.

There is a solution to everything in CSS. So, is there a way to prevent the user from seeing this ghost  image, not for security purposes but for the interacrive experience?

Yes, there is.

Add the following code to your standard CSS.

img { 
  -webkit-user-drag: none; 
  -khtml-user-drag: none; 
  -moz-user-drag: none; 
  -o-user-drag: none; 
  user-drag: none; 
}

There is also an equally simple solution to this without using CSS.

Just add attribute draggable="false" to the image and put this inside a div.

<div draggable="true"> 
   <img draggable="false" src="your/path/to/image.png"/>
</div>

Keep Coding.