CODEWITHSUNDEEP
htmlcss
Adarsh Dubey
Adarsh Dubey

Reputation: 350

How to make an image non-selectable in CSS?

I'm making a HTML & CSS website. I want to put an image in there which people can not select (or drag).

Earlier, user-select: none worked on images and texts, but now it doesn't work on images on Chrome>50 and only works on texts.

.text {
  user-select: none;
  font-family: sans-serif;
  letter-spacing: 1.3px;
  line-height: 1.3;
}

div.image img{
  user-select: none;
  width: 50%
}
<body>
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed metus efficitur massa placerat auctor faucibus ut mi. Ut sed malesuada felis. Ut varius pharetra orci nec imperdiet. Ut quis nunc elit. Sed scelerisque libero a lacus tempor, eget iaculis augue commodo. Etiam ac elit justo. Nulla pharetra efficitur magna quis gravida. Fusce vulputate lacinia enim ac fermentum. Nullam ac aliquam metus, ac egestas arcu. Cras ac orci finibus purus iaculis mattis quis nec nisl. Proin vehicula eu diam vitae maximus. Quisque ornare a odio a maximus. Donec at nunc fermentum, commodo enim et, finibus libero. Pellentesque ornare ipsum eget ex egestas sagittis.</div>
      <div class="image"><img src="https://images.unsplash.com/photo-1599009434802-ca1dd09895e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"></div>
    </body>

Notice in the above snippet that you cannot select the text, but you can select the image.

How Do I Make The Image Unselectable???

Upvotes: 1

Views: 2717

Answers (4)

loccaall
loccaall

Reputation: 113

Perhaps the easiest answer to this question is : pointer-events

Ok, here I'll show you an example:

HTML

<body>
  <div class="imageOne">
     <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="just a pic of processor :D">
  </div>
</body>

CSS

.imageOne {
  pointer-events: none; //That's basically it.
}

Upvotes: 1

Aab B
Aab B

Reputation: 83

all css attr of selection

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Upvotes: 1

Rx777
Rx777

Reputation: 77

Found this on online try it out:
div.image img{
  user-select: none;
  -drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  width: 50%
}

Upvotes: 2

Rahul
Rahul

Reputation: 5844

you can try :

img {
  pointer-events: none
}

Upvotes: 0

Related Questions