🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
4065

Three ways of dynamic Picture elements:

зу

code 
type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_level_1

  - type: horizontal-stack
    cards:

      - type: picture-elements
        title: static opacity
        image: /local/images/test/blue.jpg
        elements:
          - type: image
            image: /local/images/test/orange.jpg
            style:
              top: 50%
              left: 50%
              width: 50%
              opacity: 0.7

      - type: picture-elements
        title: dyn. opacity (CTC)
        image: /local/images/test/blue.jpg
        elements:
          - type: custom:config-template-card
            entities:
              - input_number.test_level_1
            element:
              type: image
              image: /local/images/test/orange.jpg
            style:
              top: 50%
              left: 50%
              width: 50%
              opacity: ${parseFloat(states["input_number.test_level_1"].state)/100}

  - type: horizontal-stack
    cards:

      - type: picture-elements
        title: 'dyn. opacity (card-mod #1)'
        image: /local/images/test/blue.jpg
        elements:
          - type: image
            image: /local/images/test/orange.jpg
            card_mod:
              style: |
                :host {
                  --my-opacity: {{(states('input_number.test_level_1')|int)/100}};
                }
            style:
              top: 50%
              left: 50%
              width: 50%
              opacity: var(--my-opacity)

      - type: picture-elements
        title: 'dyn. opacity (card-mod #2)'
        image: /local/images/test/blue.jpg
        elements:
          - type: image
            image: /local/images/test/orange.jpg
            card_mod:
              style: |
                hui-image {
                  opacity: {{(states('input_number.test_level_1')|int)/100}};
                }
            style:
              top: 50%
              left: 50%
              width: 50%
1 Like