Document overlay_filter and include samples in post

_docs/09-layouts.md

@@ -217,12 +217,13 @@ header:
 
 To overlay text on top of a header image you have a few more options:
 
-| Name              | Description | Default |
-| ----              | ----------- | ------- |
-| **overlay_image** | Header image you'd like to overlay. Same rules as `header.image` from above. | |
-| **excerpt**       | Auto-generated page excerpt is added to the overlay text or can be overridden. | |
-| **cta_label**     | Call to action button text label. | `more_label` in UI Text data file |
-| **cta_url**       | Call to action button URL. | |
+| Name               | Description | Default |
+| ----               | ----------- | ------- |
+| **overlay_image**  | Header image you'd like to overlay. Same rules as `header.image` from above. | |
+| **overlay_filter** | Color/opacity to overlay on top of the header image eg: `0.5` or `rgba(255, 0, 0, 0.5)`. |
+| **excerpt**        | Auto-generated page excerpt is added to the overlay text or can be overridden. | |
+| **cta_label**      | Call to action button text label. | `more_label` in UI Text data file |
+| **cta_url**        | Call to action button URL. | |
 
 With this YAML Front Matter:
 
@@ -249,6 +250,34 @@ header:
   overlay_color: "#333"
 ```
 
+You can also specifying the opacity (between 0 and 1) of a black overlay like so:
+
+![transparent black overlay]({{ base_path }}/images/mm-header-overlay-black-filter.jpg)
+
+```yaml
+excerpt: "This post should [...]"
+header:
+  overlay_image: unsplash-image-1.jpg
+  overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
+  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
+  cta_label: "More Info"
+  cta_url: "https://unsplash.com"
+```
+
+Or if you want to do more fancy things, go full rgba:
+
+![transparent red overlay]({{ base_path }}/images/mm-header-overlay-red-filter.jpg)
+
+```yaml
+excerpt: "This post should [...]"
+header:
+  overlay_image: unsplash-image-1.jpg
+  overlay_filter: rgba(255, 0, 0, 0.5)
+  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
+  cta_label: "More Info"
+  cta_url: "https://unsplash.com"
+```
+
 ---
 
 ## Sidebars

_posts/2012-03-15-layout-header-overlay-image.md

@@ -11,10 +11,43 @@ tags:
   - edge case
   - image
   - layout
+modified: 2016-05-02T11:39:01-04:00
 ---
 
+{% include base_path %}
+
 This post should display a **header with an overlay image**, if the theme supports it.
 
 Non-square images can provide some unique styling issues.
 
-This post tests overlay header images.
+This post tests overlay header images.
+
+## Overlay filter
+
+You can use it by specifying the opacity (between 0 and 1) of a black overlay like so:
+
+![transparent black overlay]({{ base_path }}/images/mm-header-overlay-black-filter.jpg)
+
+```yaml
+excerpt: "This post should [...]"
+header:
+  overlay_image: unsplash-image-1.jpg
+  overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
+  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
+  cta_label: "More Info"
+  cta_url: "https://unsplash.com"
+```
+
+Or if you want to do more fancy things, go full rgba:
+
+![transparent red overlay]({{ base_path }}/images/mm-header-overlay-red-filter.jpg)
+
+```yaml
+excerpt: "This post should [...]"
+header:
+  overlay_image: unsplash-image-1.jpg
+  overlay_filter: rgba(255, 0, 0, 0.5)
+  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
+  cta_label: "More Info"
+  cta_url: "https://unsplash.com"
+```