State based styling in picture-elements

Tags: #<Tag:0x00007f326f793580>

Is it possible to do styling on the elements in the picture-elements lovelace card based on the state of an entity?

See below example, I want the state-label to be red when the state is not equal to ‘home’.
This question is also for the image, because it only supports ‘state_filter’, where I need a ‘state_not_filter’ or something like that:

        - type: picture-elements
          style:
            overflow: hidden
          image: /local/images/my_person.png
          elements:
            # Image
            - type: image
              entity: person.my_person
              image: /local/images/my_person.png
              tap_action:
                action: more-info
              state_filter:
                "not_home": blur(5px)
            # State Label
            - type: state-label
              entity: person.my_person
              style:
                left: 0
                bottom: 0
                pointer-events: none
                font-size: 16px
                line-height: 24px
                color: white
                background-color: rgba(0, 0, 0, 0.3)
                width: 100%
                transform: initial
                padding: 0 8px

I use a conditional-element for situations like this.

It’s a little more cumbersome but also very flexible.

Yeah I have thought of that option, but as you said it is pretty cumbersome with a lot of duplicate configuration which I would like to avoid where I can

I’m sure card-mod will be able to do what you’re looking to do.

It can, but it’s a bit tricky.

You can’t just apply styes to elements, because lovelace does that by itself, and I don’t want to mess anything up with card-mod.
However, you can define a css variable on the elements card, and use that in the element style definition.

type: picture-elements
style: |
  ha-card {
    --state-color: "{%if is_state('person.my_person','home')%}white{%endif%}"
  }
elements:
  - type: state-label
    style:
      color: var(--state-color, red)
      ...etc...

@thomasloven thank you your solution got me on the right track. There was only one weird thing that I don’t understand. This doesn’t work:

    - type: horizontal-stack
      cards:
        - type: picture-elements
          style: |
            ha-card {
              --state-color: "{%if is_state('person.my_person','home')%}white{%endif%}"
            }
        ...etc

But this does:

    - type: horizontal-stack
      style: |
        ha-card {
          --state-color: "{%if is_state('person.my_person','home')%}white{%endif%}"
        }
      cards:
        - type: picture-elements
        ...etc

Note te placement of the style element. It only seems to work on the horizontal-stack, but not on the picture-elements card. When it is on the picture-elements card however, I do see a quick red flash but then it becomes the default color.

Any idea why?

Hey, did you solve this one? I’m having the same trouble too, it doesn’t seem to work on picture-elements card. For me it doesnt even flash, it just remains default color.

I was able to get this to work with a picture-elements card by removing the quotation marks from thomasloven’s example, as follows: