Impress your clients with modern, stunning, fully customizable website templates • Ad
I just finished a partial redesign of my website for the 4th time, I think, because I’m never happy with how it looks. 🙂
A new design element is a card for which I wanted to hide the content behind a blur filter, to have like a disabled effect.
It’s just placeholder content behind the blur, so I didn’t want the users to be able to select the text or drag the image, revealing them.
Luckily, there’s a super simple solution for this, which I’ll share with you.
How to Prevent Users from Dragging Content Using HTML
You might be surprised to find out that the solution is provided by HTML. 🙂
So, to prevent users from dragging content on your website, such as images and links, you only need to add the following attribute to the HTML tag: draggable="false".
<!-- Here's a simple example for an image tag -->
<img src="/assets/images/example.jpeg" draggable="false">
It has full browser support, and you can read more about it here.
The CSS Option
It’s worth mentioning that there’s also a CSS property (-webkit-user-drag), but, unfortunately, it only has full support on browsers that use the -webkit engine, such as Safari. So, the HTML version is still the way to go.
Of course, there’s always JavaScript that can help, especially if you want to add this to multiple or all the images to which you can’t efficiently implement the draggable="false" attribute.
That’s a Wrap
I hope this post has helped you out.
If you're interested in my web design services or templates, want to collaborate, or just have something to say, feel free to shoot me a message.