• Skip to content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Home
  • About
  • Contact
  • Deals

Ryan Rudolph

Front-End WordPress Developer

  • Tutorials
  • Genesis
  • WordPress
  • CSS
  • Plugins
  • Web Design
  • Events

Add A Transparent Color Layer To A Soliloquy Slider

March 9, 2018 by Ryan Rudolph Leave a Comment

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.

Share this:

Related Posts

  • Line Through Titles CSS Image
    Add A Line Through Your Titles With CSS

    There’s a lot of creative things you can do to make the typography unique on your website. A web designer friend of mine, Nina Cross,…

  • How To Add FontAwesome Icons To Simple Social Icons

    Ever have clients ask you to add abnormal social networks to their site? Ever have clients not like the Facebook icon you used? I have,…

Filed Under: CSS, Featured, Tutorials

Affiliate Disclosure: All of my posts are 100% honest and genuine. However, I may earn money from the companies mentioned in this post.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Social

  • GitHub
  • Twitter

February Special

20% OFF
newcustomer
migrate db pro

WP Migrate DB Pro

Save time and become a better developer with 20% off their developer package. Code newcustomer applied at the link below.
Expires March 31, 2019
Get This Deal

© Copyright 2019 Ryan Rudolph. All Rights Reserved. Privacy Policy.