12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Jan 10, 2020

Easier Cohesive Images using Blend Modes & Filters in Oxygen

David Browne

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 ($47/month or $599 one-time).

Already a member? Log in below or here.