Dynamic colour mask on picture element

Configuration Frontend
2

Create one more image - same car but saturated.
Place this image on the same place BEFORE the normal one.

  - type: picture-elements
    card_mod:
      style: |
        ha-card {height: 250px !important}
    elements:
      - type: image
        image: /local/images/test/car_2_grey.png
        style:
          top: 0%
          left: 0%
          transform: translate(0,0)
      - type: image
        image: /local/images/test/car_2.png
        style:
          top: 0%
          left: 0%
          transform: translate(0,0)
        card_mod:
          style:
            hui-image $: |
              .container > img#image {
                {% set LEVEL = 100-states('input_number.test_level_1')|int -%}
                mask-image: linear-gradient(to left, transparent {{LEVEL}}%, white {{LEVEL|int+1}}%);
              }
    image: /local/images/test/white.jpg

auto

Better to remove a shadow below a car, otherwise not looking perfect.

9 Likes