We can use blend modes & filters to make images on our site match our global colour scheme better without having to edit each image individually. Ideal for keeping dynamic content such as featured images on archive pages cohesive.

Here is a demo page that has only three main colours; purple as the primary colour, a light grey and a dark purple for the text.

Live Demo - Scroll to bottom to switch modes.

We can see from the demo how blending the images with some of our global colours (in this case the purple as the dark colour and the light grey as the light colour) can help them fit more cohesively into the page.

Without this, the colours from the different images can stand out and look messy.

Using Filters & Blend Modes

To apply these effects in Oxygen, our images need to be wrapped inside container divs.

In the demo, I used a repeater element so this was as easy as clicking on the image element in the repeater and selecting 'wrap with div' from the structure panel. If using Easy Posts, we'd need to add our div inside the Easy Post PHP template.

This container div will need a class, say 'blend-image-container'.

Applying Blend Modes

To apply our blend modes we can add this CSS to a stylesheet; (Note - all this can be applied visually inside Oxygen since v2.2, but it's just simpler to copy/paste the CSS into a stylesheet)

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: