Blur out images for different account levels with PHP, CSS, JavaScript or any means possible

Question

I am building a membership site and I don't want free members to see other members pictures clearly. The premium users will be able to see all images clearly. I was partially able to achieve this using css and svg filter but the downside is that when a user clik+hold+drag an image, the normal image is shown and too, a free member can easily download the image and get the clear copy.

I have thought of converting all image SRC into background-image using jQuery. But I can't find a way to limit this script to just a particular div. This is the code I used to convert image src into background:

$("img").each(function(i, elem) {
   var img = $(elem);
   var div = $("<div />").css({
   background: "url(" + img.attr("src") + ") no-repeat",
   width: img.width() + "px",
   height: img.height() + "px"
});
   img.replaceWith(div);
});

I will really appreciate if I can find another solution outside the jQuery one because the jQuery is conflicting with other features on the site.

Please I need a solution for this in anyway possible.

Thanks in advance.

Answer 1

you can use a common class on each image as your dummy class for making dull images. then you don't need a loop.

or you can use css property 'opacity' for making images dull. i hope this will help you :)