From 3f86c56a20504afc611556f241201c591b0ab5b6 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Tue, 1 Oct 2019 05:05:08 -0500
Subject: [PATCH] state_filter for picture cards (#10442)

---
 source/_lovelace/picture-elements.markdown |  4 ++++
 source/_lovelace/picture-entity.markdown   | 14 ++++++++++++++
 source/_lovelace/picture-glance.markdown   | 14 ++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/source/_lovelace/picture-elements.markdown b/source/_lovelace/picture-elements.markdown
index e5514720696..f5112d3619b 100644
--- a/source/_lovelace/picture-elements.markdown
+++ b/source/_lovelace/picture-elements.markdown
@@ -30,6 +30,10 @@ title:
   required: false
   description: Card title
   type: string
+state_filter:
+  required: false
+  description: '[State-based CSS filters](#how-to-use-state_filter)'
+  type: map
 {% endconfiguration %}
 
 ## Elements
diff --git a/source/_lovelace/picture-entity.markdown b/source/_lovelace/picture-entity.markdown
index e1e5ff31e04..925449dde05 100644
--- a/source/_lovelace/picture-entity.markdown
+++ b/source/_lovelace/picture-entity.markdown
@@ -37,6 +37,10 @@ state_image:
   required: false
   description: "Map entity states to images (`state: image URL`, check the example below)."
   type: map
+state_filter:
+  required: false
+  description: '[State-based CSS filters](#how-to-use-state_filter)'
+  type: map
 aspect_ratio:
   required: false
   description: "Forces the height of the image to be a ratio of the width. You may enter a value such as: `16x9`, `16:9`, `1.78`."
@@ -117,6 +121,16 @@ hold_action:
       default: none
 {% endconfiguration %}
 
+## How to use state_filter
+
+Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
+
+```yaml
+state_filter:
+  "on": brightness(110%) saturate(1.2)
+  "off": brightness(50%) hue-rotate(45deg)
+```
+
 ## Examples
 
 Basic example:
diff --git a/source/_lovelace/picture-glance.markdown b/source/_lovelace/picture-glance.markdown
index f1fc699bf35..4071c3b436c 100644
--- a/source/_lovelace/picture-glance.markdown
+++ b/source/_lovelace/picture-glance.markdown
@@ -46,6 +46,10 @@ state_image:
       type: string
       required: false
       description: "`state: image-url`, check the example below."
+state_filter:
+  required: false
+  description: '[State-based CSS filters](#how-to-use-state_filter)'
+  type: map
 aspect_ratio:
   required: false
   description: "Forces the height of the image to be a ratio of the width. You may enter a value such as: `16x9`, `16:9`, `1.78`."
@@ -131,6 +135,16 @@ icon:
   type: string
 {% endconfiguration %}
 
+## How to use state_filter
+
+Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
+
+```yaml
+state_filter:
+  "on": brightness(110%) saturate(1.2)
+  "off": brightness(50%) hue-rotate(45deg)
+```
+
 ## Examples
 
 ```yaml