Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Perhaps you do not know, but with CSS3 you can apply changes to images without using Photoshop or any other graphic tool. In this article, in fact, you’ll discover how easy it is to apply filters to your images using only CSS. You will learn to create images in black and white, to create images with a mirror effect and additionally also discover how to apply Instagram filters, with a few simple lines of code.
So let’s get cooking!
Cooking time
This should take you around 5 minutes max.
Preparation
First, create a new section, add the number of columns you prefer, and add the image module.
Next, click on the Custom CSS tab, and add the filter class you prefer, and you want to apply to your images.
This is all what you need to apply a filter to your images, but now find out which filters you can apply and their CSS code.
Method
Copy and paste the CSS below for the effect you want to use into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section.
#Effect Greyscale
Custom Class: filter_greyscale
.filter_grayscale { -webkit-filter: grayscale(1); filter: grayscale(1); }
#Effect Sepia
Custom Class: filter_sepia
.filter_sepia { -webkit-filter: sepia(1); filter: sepia(1); }
#Effect Saturate
Custom Class: filter_saturate
.filter_saturate { -webkit-filter: saturate(4); filter: saturate(4); }
#Effect Hue-rotate
Custom Class: filter_hue-rotate
.filter_hue-rotate { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); }
#Effect Invert
Custom Class: filter_invert
.filter_invert { -webkit-filter: invert(.8); filter: invert(.8); }
#Effect Opacity
Custom Class: filter_opacity
.filter_opacity { -webkit-filter: opacity(.5); filter: opacity(.5); }
#Effect Brightness
Custom Class: filter_brightness
.filter_brightness { -webkit-filter: brightness(.5); filter: brightness(.5); }
#Effect Contrast
Custom Class: filter_contrast
.filter_contrast { -webkit-filter: contrast(3); filter: contrast(3); }
#Effect Blur
Custom Class: filter_blur
.filter_blur { -webkit-filter: blur(5px); filter: blur(5px); }
#Effect Multiple-filters
Custom Class: filter_multiple-filters
.filter_multiple-filters { -webkit-filter: contrast(1) saturate(0) sepia(.6); filter: contrast(1.4) saturate(1.8) sepia(.6); }
Filters Instagram style:
#Effect Xpro2
Custom Class: filter_xpro2
.filter_xpro2 {
-webkit-filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);
filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);
}
#Effect Walden
Custom Class: filter_walden
.filter_walden {
-webkit-filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
}
#Effect Valencia
Custom Class: filter_valencia
.filter_valencia {
-webkit-filter: sepia(0.15) saturate(1.5) contrast(0.9);
filter: sepia(0.15) saturate(1.5) contrast(0.9);
}
#Effect Toaster
Custom Class: filter_toaster
.filter_toaster {
-webkit-filter:sepia(0.4) saturate(2.5) hue-rotate(-30deg) contrast(0.67);
-filter:sepia(0.4) saturate(2.5) hue-rotate(-30deg) contrast(0.67);
}
#Effect Sutro
Custom Class: filter_sutro
.filter_sutro {
-webkit-filter: brightness(0.75) contrast(1.3) sepia(0.5) hue-rotate(-25deg);
filter: brightness(0.75) contrast(1.3) sepia(0.5) hue-rotate(-25deg);
}
#Effect Rise
Custom Class: filter_rise
.filter_rise {
-webkit-filter: saturate(1.4) sepia(0.25) hue-rotate(-15deg) contrast(0.8) brightness(1.1);
filter: saturate(1.4) sepia(0.25) hue-rotate(-15deg) contrast(0.8) brightness(1.1);
}
#Effect Nashville
Custom Class: filter_nashville
.filter_nashville {
-webkit-filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);
filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);
}
#Effect Mayfair
Custom Class: filter_mayfair
.filter_mayfair {
-webkit-filter: saturate(1.4) contrast(1.1);
filter: saturate(1.4) contrast(1.1);
}
#Effect Kelvin
Custom Class: filter_kelvin
.filter_kelvin {
filter: sepia(0.4) saturate(2.4) brightness(1.3) contrast(1);
-webkit-filter: sepia(0.4) saturate(2.4) brightness(1.3) contrast(1);
}
#Effect Hudson
Custom Class: filter_hudson
.filter_hudson {
-webkit-filter: contrast(1.2) brightness(0.9) hue-rotate(-10deg);
filter: contrast(1.2) brightness(0.9) hue-rotate(-10deg);
}
#Effect Earlybird
Custom Class: filter_earlybird
.filter_earlybird {
-webkit-filter: sepia(0.4) saturate(1.6) contrast(1.1) brightness(0.9) hue-rotate(-10deg);
filter: sepia(0.4) saturate(1.6) contrast(1.1) brightness(0.9) hue-rotate(-10deg);
}
#Effect 1977
Custom Class: filter_1977
.filter_1977 {
-webkit-filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8);
filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8);
}
Bonus tricks
But I still have not finished, because I want to show you two tricks that can be useful for you :). The first allows you to create a reflection effect to your photos, but is also applicable to the text. The second tricks, however, allows you to apply all the effects shown in this tutorial, only on mouseover.
#Effect Reflection
Custom Class: effect_reflection
.effect_reflection {
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.1)));
}
#Filter Hover
To create apply the filter on hover, all you have to do is add to the CSS a pseudo-class :hover. Here’s an example:
.filter_grayscale:hover {
-webkit-filter: grayscale(1);
filter: grayscale(1);
-webkit-transition: .5s;
transition: .5s;
}
In this case, the black and white effect, will only be applied on mouseover.
Note: Remember that you will need to apply the custom class to the module, as I described at the beginning of this tutorial.
Conclusion
This is all. In summary, we have seen how we can harness the power of CSS to manipulate images without using Photoshop and how to create a simple hover effect. Playing a little with the values and with fantasy, I’m sure you will get some fantastic effects for your images.
And that’s it. Enjoy!.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Fabio.
Is it possible to get the sepia version to work on a divi slider? So if the slider is full width scrolling, could just the center image turn to sepia while the rest stay their normal color? Without hovering the mouse over it?
Yes you should be able to target the active slide, if you provide a link I can take a look
Beautiful work Fabio, truly, as always!
Happened on to your site twice this week, and Michelle…this is my 3rd trip…;0) Great job and thank you for the continued education!
D
Most welcome Dehn, and great to see you here
Hi, great content here with the filters. I have a testimonial that I want to blur the image in the section behind the testimonial. How do I apply the filter_blur but not affect teh testimonial slider as well. See here for my example http://marshallraybooks.com (scroll down to PRAISE FOR JACKSON CITY ORPHANS).
Thanks,
KC Clark
I don’t see any images in your testimonial but you would need to add the filter specifically to the image element of the testimonial.
something like:
.et_pb_testimonial_description img {
styles
}
If you add an image and then check the selector either in the custom CSS tab on with chrome dev tools
Hi all, love the tips you’re giving here. But I am looking for another solution. I want to display images in black and white (I can do this with Photoshop, no problem), but then on hover I want them to turn into their original colour… Any easy peasy way to do this? Thanks a million in advance!
Yes you can do this with filters and the :hover pseudo class. Check out the CSS in this free layout as it does exactly that https://divisoup.com/diamond-image-section-layout-demo/
May I suggest you add a section to your post about browser compatibility? Chome, FireFox, Opera, Safari, Edge and IE(11).
Great stuff Fabio,
They work great. Thanks.
I would like to make one image on my site grayscale with CSS, then on hover apply one of the filters above. I can do each seperately, but I can’t seem to put them together!
Any advice?
Thanks
Hello Pete!
is very simple: add this class custom filter_custom, in CSS custom tab of your image form. Child in your theme options panel or copy this code:
.filter_custom {
-webkit-filter: grayscale(1); filter: grayscale(1);
-webkit-transition: .5s;
transition: .5s;
}
.filter_custom:hover {
-webkit-filter: sepia(1); filter: sepia(1);
}
This example allows you to have originally a picture in black and white with a sepia effect on mouse over.
You can use this example to create the effect you want by simply changing the code within the braces.
Thanks very much Fabio. Worked great.
Hi Michelle, The tips you provided worked excellent. I have a full page contact form. I want to put a background image. It’s a Divi site, but due to complexity of the form, I had to use Caldera Forms. I have used a text module in a standard row to put the form shortcode in it. I have added an image as row background. I have put required effect CSS in the main element of the Row. The effect is on all the elements in the row including the form & the background image as well. Any idea, how to… Read more »
Hello Manas!
if you give me a link, I can do to help you
I wanted to try the blur for a site a few weeks ago but the problem is that the edges of the image have a lighter area where the edge is blurred.
How do you get around that if you don’t want the lighter “beveled” look around the image?
Hi there,
Nothing works!
It seems you missed one step. What to do with this code
.filter_1977 {
-webkit-filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8);
filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8);
}
Where to insert / place one?
Regards,
Igor
Hey Igor
Sorry we will add to the post. Place the CSS in your child theme style.css or in the custom CSS section in the divi theme options epanel
How would you get an element to change to a specific color (say, 008080) when hovering? That would be neat and it would work with some of the blurbs on my home page.
Thanks.
To achieve this you need to create an overlay that is activated upon mouseover.
To create it you need a second div that has the function to create a second level, if you know Photoshop, you know what it’s about.
But on a Blurb module, it is not available by default, you have to create a custom module that adds a div for the overlay.
I hope that my explanation is understandable
I think it’s important to point out that by using CSS filters to create these image manipulations, you are passing the workload on to the users browser slowing your page load. This would be minor for one or two images but if someone were to go a bit crazy and have a whole page full of images where CSS filters were used this would negatively effect speed. I think best practice would be to use Photoshop or a similar program to create basic filters before upload. Applying filters to achieve the hover effect would also be better served by creating… Read more »
Thanks for your comments Colin. Yes I agree on many images this would cause an issue, hopefully people take the end user into account whenever they implement these types of effects and do things in moderation. Making people aware of all of these effects is great for learning though, in fact there are a few in there I didn’t know were possible
Hello Colin!
).
you’re absolutely right, but there are many users who do not have experience using Photoshop or other graphics tools, and find it easier to use this solution. Of course, not to create pages with many and too many graphics effects. Thanks for your comment, I appreciate very constructive. (Not sure if in English we say “Constructive Comment” but in Italy means a smart comment and offering teaching
Thanks. Does this go in style.css?
.filter_grayscale { -webkit-filter: grayscale(1); filter: grayscale(1); }
I’m confused.
My bad. I screwed something up. Working now.
Sorry if I answer only now, but I was very busy. But I’m glad you’ve solved. Have a nice Weekend Phil!