Lovelace Picture element card

Hi, I am starting to develop my lovelace but cant really get it the way I like.
I want a picture element card that have the light switch icon and text up in the left corner of the picture, not in the bottom of it. How is this possible? I want the icon to turn yellow when β€œon”.
Can someone please post an example card that I can copy and develop further by my selves?
Thanks // Fredrik

example

elements:
  - entity: light.outside
    style:
      '--ha-label-badge-font-size': 1em
      left: 7%
      top: 20%
    type: state-icon
image: /local/kap.jpg
type: picture-elements

if you want to toggle light on press then:

elements:
  - entity: light.desk
    style:
      '--ha-label-badge-font-size': 1em
      left: 7%
      top: 20%
    type: state-icon
    tap_action:
      action: toggle
image: /local/kap.jpg
type: picture-elements

For name: Placing text inside picture-elements card

Thanks @ n1k5y
Now this is starting to look as i intended :slight_smile:

image

2 Likes