Pointer event combine hover css - html

Question

I have a image that needs preventing people from saving or drag so I use
pointer-events: none;
but then I also want to add hover effect zoom like:
transform: scale(1.5);
Is there a way to achieve this?

Answer 1

You could set pointer-events:none; on the img, but wrap it in another element to trigger the hover action.
.image-wrapper {
display: inline-block;
overflow: hidden;
font-size: 0;
}
.image-wrapper:hover img {
transform: scale(1.5);
}
img {
transition: all .3s ease-out;
pointer-events: none;
}
<div class="image-wrapper"><img src="https://picsum.photos/200/300"></div>

Answer 2

As you've seen, pointer-events: none will stop the element reacting to any mouse movements or clicks at all, which isn't what you want.
To prevent dragging, you can just add the draggable="false" attribute to your image.
To cancel clicks, you can add an event listener to click and then call event.preventDefault() or return false. The quick and dirty way to do this is:
<img draggable="false" onclick="return false;"/>
There are much neater and nicer ways of attaching javascript to your elements, though.
It's important to know that disabling clicking and dragging will not prevent someone who really wants to save your image from saving it - and there's not really anything you can do if someone is really determined. If the user can see the image, the user can save the image. It might make it slightly more annoying, which might be enough for your case.