{"id":2598,"date":"2017-09-06T13:56:19","date_gmt":"2017-09-06T03:56:19","guid":{"rendered":"http:\/\/benryan.com.au\/?p=2598"},"modified":"2017-09-07T21:38:49","modified_gmt":"2017-09-07T11:38:49","slug":"gradient-overlay","status":"publish","type":"post","link":"https:\/\/benryan.com.au\/gradient-overlay\/","title":{"rendered":"Gradient Overlay for Full Width Parallax Featured Image"},"content":{"rendered":"

After writing the how-to article on the Full Width Parallax Featured Image<\/a>, theres one question I get asked a lot. How do I change the transparent overlay to a gradient overlay?<\/strong> The answer is actually quite easy. The hardest part is choosing the colour or colours, and opacity.<\/p>\n<\/div>

How to add a gradient overlay to the full-width parallax featured image?<\/span><\/h2>

If you haven’t already, apply the full width parallax featured images to you X Theme or Pro Theme. It’s a few very simple steps to follow here, or download the X and Pro Child Themes below with it pre-installed.<\/p>\n<\/div>

Download Child Themes<\/a><\/span><\/p>\n<\/div>

Now we’ve got that out of the way, lets get down to business.<\/p>\n

To change the transparent overlay on the full width parallax featured image to a gradient overlay, locate the below CSS:<\/p>\n

\r\n.featured-image:after {\r\nbackground: rgba(96, 124, 138, 0.85);\r\n}\r\n<\/pre>\n<\/div>
Change transparent colour <\/span><\/h3>
Simply choose a new colour. For example, change rgba(96, 124, 138, 0.85) to rgba(139, 195, 74, 0.85).<\/p>\n
The 4th number in the RGBA sequence is relating to the transparency. 0 being completely transparent, and 1 being a solid colour. Play with the transparency to see what looks good on your site.<\/p>\n
New gradient overlay CSS would look something like:<\/p>\n
\r\n.featured-image:after {\r\nbackground: rgba(139, 195, 74, 0.85);\r\n}\r\n<\/pre>\n<\/div>
Change to gradient overlay <\/span><\/h3>
Simply choose the colours you’d like to use in your gradient. This part can be difficult as the options are endless<\/em>. If you need some gradient inspiration, check out UI Gradients<\/a>. Also W3 Schools<\/a> has a great breakdown of everything to do with gradient overlay CSS (linear and radial).<\/p>\n
Now change<\/p>\n
background: rgba(96, 124, 138, 0.85);<\/p>\n
to<\/p>\n
background: -webkit-linear-gradient(to bottom, rgba(96, 124, 138, 0.85), rgba(139, 195, 74, 0.85));
\nbackground: linear-gradient(to bottom, rgba(96, 124, 138, 0.85), rgba(139, 195, 74, 0.85));<\/p>\n
The linear gradient overlay CSS should look like this:<\/p>\n
\r\n.featured-image:after {\r\nbackground: -webkit-linear-gradient(to bottom, rgba(96, 124, 138, 0.85), rgba(139, 195, 74, 0.85)); \/* Chrome 10-25, Safari 5.1-6 *\/\r\nbackground: linear-gradient(to bottom, rgba(96, 124, 138, 0.85), rgba(139, 195, 74, 0.85)); \/* W3C, IE 10+\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\/\r\n}\r\n<\/pre>\n<\/div>
Remove the transparent overlay<\/span><\/h3>
Very simply delete the below code from the CSS.<\/p>\n
\r\n.featured-image:after {\r\nbackground: rgba(96, 124, 138, 0.85);\r\n}\r\n<\/pre>\n<\/div>
What is a linear gradient overlay and why do I need it?<\/span><\/h2>
A linear gradient overlay, or even a transparent overlay isn’t a necessicity. It just looks awesome.<\/p>\n
I like to imagine the gradient overlay as the following – Imagine your looking at a picture perfect landscape through a a pane of coloured glass. Still stunning while adding a new dimension to that image. <\/p>\n
The linear gradient has many uses in Web Design. <\/p>\n