How to Blur Text or Images in WordPress

hedgehog-mascot

Sometimes bloggers need to blur text in parts of a post or page. One reason might be to motivate readers to sign up for site membership or pay to unlock premium for premium content. Blurring the text is a powerful way to show and hide something at the same time.

Here is a short and sweet tutorial to achieve such blurring.

Create CSS Class

First you need to create a CSS class. It is a piece of code that goes to your theme’s style.css file.

You will find this file by going to WordPress Dashboard > Appearance > Editor. The editor opens the style.css file by default.

Alternatively, you might be using some plugins which let you add CSS code in some other way. For example, Simple Custom CSS is one such plugin. If you are using such a plugin, then you already know how to add your CSS code using it anyway, so I am not going to delve into that topic any further.

The CSS class to blur text is as follows:

Now, if you leave it at that, the text will be blurred alright, but users would still be able to select the blurred text. And by doing so they would reveal the hidden content.

So, we need to add some additional code to make the blurred text non-selectable or non-highlightable in browsers:

Pretty simple, right?

Note

Power users will still be able to reveal content hidden this way. All they need to do is use the Ctrl+U keyboard shortcut on the post or page with the blurred text. And, voila, they will be able to read the source code and within it the previously hidden content as well.

Add CSS Class to Text

The next step is to open your post or page in WordPress’ editor and add the CSS class created above.

To do so, you will need to enclose the content you wish to blur in HTML tags, like so:

And, in reality, this is how that above text would show up on your site:

Content to be blurred out.

Also Blur the Images

You can go even further and blur the images in a post as well.

To do so, I like to use Photoshop Elements. Open an image in the application that you wish to blur.

Go to Filter > Blur > Gaussian Blur… in the menu.

In the Radius box, select at least 20 pixels, so that the image is blurry enough that nobody can make out what it really shows.

Here is a comparison of the blurred image with the original sharp image:

Blurred Image

Original Image

As you can see blurring content is a simple and effective way to show something, yet at the same time not give out the actual content.

Liked this post?

Subscribe to our newsletter to receive early notification of new posts and deals:

Next Post »« Previous Post

Leave a Reply

Your email address will not be published. Required fields are marked *