Add A Transparent Color Layer To A Soliloquy Slider

A popular design trend you will see on a lot of newer themes, is a saturated or darkened banner. I really like this style, it makes the banner less distracting, and conveys a clean and professional look. It also gives a lot more contrast to any text or buttons you plan to display on the banner. I find myself constantly forgetting how to do this, hence the quick and simple write-up.

Here’s The Code To Add To Your CSS

The only thing worth tweaking will be the red green and blue (RGB) values and the opacity. I recommend keeping RGB values under 100, which ensures that higher level of saturation.

Use It Elsewhere

If you’re not using Soliloquy no problem. Just apply the same code on the parent container of any image element. Important: For the layer to not overlap make sure you set the container to position: relative.