Image Filters are quite the ‘in-thing’ these days to add the extra tinge of professionalism to the photos. However, image filters could be a lot more than just a gimmick or a trend, as they can provide a quick and easy way to enhance the visuals on the website.

It is true that WordPress doesn’t provide many options for image editing, but even this purpose can be served. This article basically discusses the WordPress image filters that might be added to the website.

But even before that, it needs to be discussed and clarified that why The users should consider Adding Image Filters to WordPress:

Undoubtedly, Image filters are a great way to customize website’s images. While some people might simply consider them as a social media gimmick, they are definitely a powerful way to customize graphics. Moreover, they are extremely useful for WordPress users, since the platform doesn’t enable them to tweak images much beyond resizing and cropping them.

Image Filters

Now, certain things that can be done by using image filters:

  • Customize images to fit in with the user’s style
  • Branding Media
  • Enhance stock images

For the users in the quest for more options, when it comes to image customization in WordPress, filters are a significant first step. However, users could also add a basic image editor to the dashboard, completely negating the need for any standalone software.

Now, top 6 WordPress Image Filters users can add to the Websites, using CSS:

Even without using any additional plugins, users might as well alternatively use some CSS effects to achieve a similar filtered look. For this, Divi users would need to head to the Divi >Theme Options tab in the WordPress dashboard, and look for the Custom CSS field at the bottom of the page:

Custom CSS

After this, users can paste the CSS code found in each section over there, for the filters users would want to use, save changes, and then it is all set for using filters.

1. Opacity:

filter opacity example

For this first example, an opacity filter is being added to one of the images. In other words, this is a way to make images transparent. Often users would use this either to reduce how prominent an image is, for instance, if it is a part of the background, or overlay it with other images. Here’s the CSS snippet users would want to add to the Custom CSS field:

.filter-opacity
{
filter: opacity(.7);
-webkit-filter: opacity(.7);
}

Users might as well notice a new CSS class here, called filter-opacity. Inside, an opacity filter is applied with a strength of .7 which could be changed to any value between zero and one, and here both the filter property and ‘WebKit’ filter has been used. These are such browsers that use WebKit as their CSS rendering engine, such as Safari on macOS and would recognize the instructions as well.

Now, to test this new filter, one of our Divi pages are opened and one of the head shots have been customized. Here’s the original image:

original-headshot

To apply this filter, users need to open the page using the Divi Builder and locate the corresponding Image module. Then click on the Module Settings button:

Module Settings button

Then, once the user is into it, he/she needs to go to the Advanced tab and look for the CSS Class field, then type the name of the new class. In this case, it’s filter-opacity:

filter-opacity-example.png

Users might as well name your the filter’s classes any way they would want. Once the user has saved all of the changes, users would be then able to see the effects of the filter applied. It is important that this process would be similar to any other CSS filters users would want to add. To add filters to images, users would simply add the class they would like to the images users would want to customize.

2. Sepia:

example-sepia

Sepia filters offer an excellent way to add an ‘old-time’ look to the images, although it should be applied selectively, else would become a passé look if overdone. This applies a reddish-brown haze over the images, making them look like faded photographs. Given below the code needed to add the filter to the website:

.filter-sepia
{
filter: sepia(100%);
-webkit-filter: sepia(100%);
}

In this example, the filter is applied using a percentage. Further, this can be used or decimals or both, although it is needed to stick to one or the other to avoid confusion. In this case, the number one equals a filter with a strength of 100%.

3. Saturate

saturate-example

Saturating an image is quite an excellent way to liven up dull colors, and this filter increases the intensity of all colors in the image. For instance, the yellows in the example above, pop out now a lot more than they used to. So, here’s the code needed to add to the Custom CSS field:

.filter-saturate
{
filter: saturate(1);
-webkit-filter: saturate(1);
}

In this case,  a value of one is used to over-saturate the example, but users can, of course, adjust the numbers the way they like.

4. Invert

invert-example

Here the filter is a bit different. This filter inverts all the colors of the image. For example, black becomes white, and so on. It’s not a filter often seen in photography, but it also serves a practical way to offer visual accessibility to some visitors. Here’s the code snippet, users need to copy:

.filter-invert
{
filter: invert(.8);
-webkit-filter: invert(.8);
}

A value of one, in this case, would result in a fully inverted image. This is a tricky filter to set up, so users might have to tweak the value until they find a strength that would please them.

5. Grayscale

grayscale-example

This filter is a bit traditional. The Grayscale filter takes the images and replaces the colors with tones of gray. Now, this might act as a quick way to turn photos into black and white old-time pictures. So for that, here’s the code users would need:

.filter-greyscale
{
filter: grayscale(1);
-webkit-filter: grayscale(1);
}

Setting a value of one would remove all other colors from the images, whereas smaller numbers would just dampen them. Users might as well notice that they can achieve a similar effect with a low saturated value.

6. Contrast

contrast-example

Perhaps the most common, the contrast filter would be the one users are likely most familiar with. It essentially makes the whites whiter and the blacks darker, enabling users to liven up faded colors. Here’s the CSS they need to use it in WordPress:

.filter-contrast
{
filter: contrast(1);
-webkit-filter: contrast(1);
}

As always, the strength of the filter depends on the value users would type in there, so they are free to tweak it as per their liking.

Now, these Image filters can have a lot more uses than users might first expect, given their usage on sites such as Instagram. For example, users can use filters to customize the images uploaded to WordPress or to differentiate stock graphics. Either way, Divi makes it easy to use color filters, effects and blend modes for all the images, modules, rows, and sections on the website.

 

Leave a Reply

Or

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


CAPTCHA Image
Reload Image

Find us on Facebook

Most Important News

Subscribe to our Newsletter