R13: How to use CSS3 filters to create captivating images

by | May 5, 2016 | CSS Tips & Tricks, Images

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

How to use CSS3 filters to create captivating images

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!

ingredients

The Divi Theme from Elegant Themes

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.

add-section

Next, click on the Custom CSS tab, and add the filter class you prefer, and you want to apply to your images.

add-filter

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

venezia venezia

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

 

#Effect Sepia

Custom Class: filter_sepia

venezia venezia

.filter_sepia {     -webkit-filter: sepia(1);     filter: sepia(1); }

 

#Effect Saturate

Custom Class: filter_saturate

venezia venezia

.filter_saturate {     -webkit-filter: saturate(4);     filter: saturate(4); }

 

#Effect Hue-rotate

Custom Class: filter_hue-rotate

venezia venezia

.filter_hue-rotate {     -webkit-filter: hue-rotate(90deg);     filter: hue-rotate(90deg); }

 

#Effect Invert

Custom Class: filter_invert

venezia venezia

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

 

#Effect Opacity

Custom Class: filter_opacity

venezia venezia

.filter_opacity {     -webkit-filter: opacity(.5);     filter: opacity(.5); }

 

#Effect Brightness

Custom Class: filter_brightness

venezia venezia

.filter_brightness {     -webkit-filter: brightness(.5);     filter: brightness(.5); }

 

#Effect Contrast

Custom Class: filter_contrast

venezia venezia

.filter_contrast {     -webkit-filter: contrast(3);     filter: contrast(3); }

 

#Effect Blur

Custom Class: filter_blur

venezia venezia

.filter_blur {     -webkit-filter: blur(5px);     filter: blur(5px); }

 

#Effect Multiple-filters

Custom Class: filter_multiple-filters

venezia venezia

.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

venezia venezia

.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

venezia venezia

.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

venezia venezia

.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

venezia venezia

.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

venezia venezia

.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

venezia venezia

.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

venezia venezia

.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

venezia venezia

.filter_mayfair {
  -webkit-filter: saturate(1.4) contrast(1.1);
  filter: saturate(1.4) contrast(1.1);
}

 

#Effect Kelvin

Custom Class: filter_kelvin

venezia venezia

.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

venezia venezia

.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

venezia venezia

.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

venezia venezia

.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

venezia venezia

.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.

FABIO SARCONA | I am a freelance developer, dad of Creative Child Themes and one a sweet puppy Cocker Spaniel named Camilla. You want to see me happy? You just need a computer and chips! You can find me at https://creativechildthemes.com/
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!