Full transparent card (picture element)

Hi guys,

I have an question about one custom made card, which i want full transparent on the borders, as example an encircle:

:Untitled2

This is my card config:

type: picture-elements
image: /local/images/ds918plustestdark.png
style: |
  ha-card {
    --drive-1-color: 
    {% if states("sensor.nas_drive_1_temperature") | float > 90 %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --drive-2-color: 
    {% if states("sensor.nas_drive_2_temperature") | float > 90 %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --drive-3-color: 
    {% if states("sensor.nas_drive_3_temperature") | float > 90 %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --drive-4-color: 
    {% if states("sensor.nas_drive_4_temperature") | float > 90 %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --drive-1-status: 
    {% if states("sensor.nas_drive_1_status") != "normal" %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --drive-2-status: 
    {% if states("sensor.nas_drive_2_status") != "normal" %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --drive-3-status: 
    {% if states("sensor.nas_drive_3_status") != "normal" %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --drive-4-status: 
    {% if states("sensor.nas_drive_4_status") != "normal" %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --update-status: 
    {% if states("binary_sensor.nas_update_available") == 'on' %}
      #d3fa37
    {% else %}
      #44729e
    {% endif %};
    --security-status: 
    {% if states("binary_sensor.nas_security_status") == 'off' %}
      #d3fa37
    {% else %}
      #ff0000
    {% endif %};
    --volume-status: 
    {% if states("sensor.nas_volume_1_status") == 'normal' %}
      #d3fa37
    {% else %}
      #ff0000
    {% endif %};
  }
elements:
  - type: state-icon
    entity: binary_sensor.nas_update_available
    style:
      left: 93%
      top: 55%
      '--paper-item-icon-color': var(--update-status)
  - type: state-icon
    entity: sensor.nas_drive_1_status
    style:
      left: 89.5%
      top: 30%
      transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
      '--paper-item-icon-color': var(--drive-1-status)
  - type: state-icon
    entity: sensor.nas_drive_2_status
    style:
      left: 89.5%
      top: 36%
      transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
      '--paper-item-icon-color': var(--drive-2-status)
  - type: state-icon
    entity: sensor.nas_drive_3_status
    style:
      left: 89.5%
      top: 42%
      transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
      '--paper-item-icon-color': var(--drive-3-status)
  - type: state-icon
    entity: sensor.nas_drive_4_status
    style:
      left: 89.5%
      top: 48%
      transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
      '--paper-item-icon-color': var(--drive-4-status)
  - type: state-label
    entity: sensor.nas_drive_1_temperature
    style:
      left: 96%
      top: 30%
      font-size: 70%
      color: var(--drive-1-color)
  - type: state-label
    entity: sensor.nas_drive_2_temperature
    style:
      left: 96%
      top: 36%
      font-size: 70%
      color: var(--drive-2-color)
  - type: state-label
    entity: sensor.nas_drive_3_temperature
    style:
      left: 96%
      top: 42%
      font-size: 70%
      color: var(--drive-3-color)
  - type: state-label
    entity: sensor.nas_drive_4_temperature
    style:
      left: 96%
      top: 48%
      font-size: 70%
      color: var(--drive-4-color)
  - type: state-icon
    entity: binary_sensor.nas_security_status
    style:
      left: 16%
      top: 11%
      '--paper-item-icon-color': var(--security-status)
  - type: state-label
    entity: binary_sensor.nas_security_status
    prefix: ''
    style:
      left: 16%
      top: 18%
      font-size: 80%
  - type: state-icon
    entity: sensor.nas_volume_1_status
    style:
      left: 34%
      top: 11%
      '--paper-item-icon-color': var(--volume-status)
  - type: state-label
    entity: sensor.nas_volume_1_status
    prefix: ''
    style:
      left: 34%
      top: 18%
      font-size: 80%
  - type: state-icon
    entity: sensor.nas_volume_1_used_space
    style:
      left: 52%
      top: 11%
  - type: state-label
    entity: sensor.nas_volume_1_used_space
    prefix: ''
    style:
      left: 52%
      top: 18%
      font-size: 80%
  - type: state-icon
    entity: sensor.nas_volume_1_total_size
    style:
      left: 70%
      top: 11%
  - type: state-label
    entity: sensor.nas_volume_1_total_size
    prefix: ''
    style:
      left: 70%
      top: 18%
      font-size: 80%
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.nas_cpu_load_5_min
        name: CPU
    align_icon: left
    show:
      fill: false
      icon: false
      state: true
      name: true
    align_state: center
    font_size: 60
    animate: true
    hours_to_show: 6
    points_per_hour: 12
    refresh_interval: 30
    style: |-
      :host {
        left: 44%;
        top: 40%;
      }
      ha-card {
        background: transparent;
        box-shadow: none;
      }
  - type: 'custom:bar-card'
    entities:
      - entity: sensor.nas_volume_1_volume_used
        name: Disk Usage
        positions:
          icon: inside
          name: inside
          indicator: 'off'
        icon: 'mdi:harddisk'
        animation:
          state: 'on'
        severity:
          - from: 0
            to: 50
            color: '#40bf40'
          - from: 51
            to: 80
            color: '#ff7b00'
          - from: 81
            to: 100
            color: '#bf4040'
      - entity: sensor.nas_memory_usage_real
        name: Memory
        positions:
          icon: inside
          name: inside
          indicator: 'off'
        icon: 'mdi:memory'
        animation:
          state: 'on'
        severity:
          - from: 0
            to: 50
            color: '#40bf40'
          - from: 51
            to: 80
            color: '#ff7b00'
          - from: 81
            to: 100
            color: '#bf4040'
      - entity: sensor.nas_network_up
        name: Network Up
        positions:
          icon: inside
          name: inside
          indicator: 'off'
        icon: 'mdi:upload-network'
        max: 125000
        animation:
          state: 'on'
        severity:
          - from: 0
            to: 60000
            color: '#40bf40'
          - from: 60001
            to: 100000
            color: '#ff7b00'
          - from: 100001
            to: 125000
            color: '#bf4040'
      - entity: sensor.nas_network_down
        name: Network Down
        positions:
          icon: inside
          name: inside
          indicator: 'off'
        icon: 'mdi:download-network'
        max: 125000
        animation:
          state: 'on'
        severity:
          - from: 0
            to: 60000
            color: '#40bf40'
          - from: 60001
            to: 100000
            color: '#ff7b00'
          - from: 100001
            to: 125000
            color: '#bf4040'
    height: 25px
    width: 300px
    style: |-
      :host {
        left: 44%;
        top: 75%;
      }
      bar-card-value {
        color: white;
        text-shadow: 1px 1px #0005;
      }
      bar-card-name {
        color: white;
        text-shadow: 1px 1px #0005;
      }
      ha-icon {
        color: white;
      }
      ha-card {
        padding: 0px;
        background: transparent;
        box-shadow: none;
      }
      bar-card-current, bar-card-backgroundbar, bar-card-currentbar {
        border-radius: 5px;
      }

How i can realize that the borders in the card are fully transparent (opacity 100%). As example, my image is already good. Imgur: The magic of the Internet

I use these for transparent card:

              style: |
                ha-card {background: transparent; border-style: none; border: 0px; box-shadow: none;}
1 Like

For whatever reason, whenever I try to add an opaque element to the style it applies it to the entire picture-element and every other element within it. I just want the background image opaque, not my buttons. How can I accomplish this?

          type: picture-elements
          image: /local/wallpaper/mobile_wallpaper_geometric.gif
          style: |
            ha-card {
              border-style: none;
              border: 0px;
              box-shadow: none;
              opacity: 60%
            } 
          elements:

I want to make the whole picture element card like 30% transparent. I have tried adding the lines you have used but it does not work for me. How can i do this?

elements:
  - entity: light.koogi_kappide_valgustid
    image: /local/köögitasapind.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.sonoff
    image: /local/koridori garderoob.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.karoliine_toa_laetule_luliti
    image: /local/Karoliine tuba.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.master_bedroomi_laetule_luliti
    image: /local/Master bedroom.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: light.elutoa_laualamp
    image: /local/Elutoa nurgalamp.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.elutoa_laetulede_luliti_left
    image: /local/elutuba1.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.elutoa_laetulede_luliti_right
    image: /local/elutuba2.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.koridori_tulede_luliti
    image: /local/Koridor.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.wc_tulede_luliti
    image: /local/wc.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.pesula_ja_sauna_tulede_luliti_left
    image: /local/duss.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.peegli_valgustus
    image: /local/duss.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.pesula_ja_sauna_tulede_luliti_right
    image: /local/Saun.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.terrassi_tule_luliti
    image: /local/terrass.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.terrassi_led_valgustid
    image: /local/terrass.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.terrassi_tulede_luliti_left
    image: /local/terrass.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: switch.kendra_toa_laetule_luliti
    image: /local/kontor.png
    state_filter:
      'off': opacity(0%)
      'on': opacity(100%)
    style:
      left: 0%
      top: 0%
      transform: none
    tap_action:
      action: none
    type: image
  - entity: sensor.elutoa_temperatuuri_ja_niiskuse_andur_temperature
    style:
      left: 16%
      top: 4%
    type: state-label
  - entity: sensor.elutoa_temperatuuri_ja_niiskuse_andur_humidity
    style:
      left: 16%
      top: 8%
    type: state-label
  - entity: sensor.pesula_temperatuuri_ja_niiskuse_andur_temperature
    style:
      left: 93%
      top: 38%
    type: state-label
  - entity: sensor.0x00158d0004188a0c_humidity
    style:
      left: 93%
      top: 42%
    type: state-label
  - entity: sensor.koridori_temperatuuri_ja_niiskuse_andur_temperature
    style:
      left: 93%
      top: 51%
    type: state-label
  - entity: sensor.koridori_temperatuuri_ja_niiskuse_andur_humidity
    style:
      left: 93%
      top: 55%
    type: state-label
  - entity: sensor.master_bedroomi_temperatuuri_ja_niiskuse_andur_temperature
    style:
      left: 75%
      top: 90%
    type: state-label
  - entity: sensor.karoliine_toa_temperatuuri_ja_niiskuse_andur_temperature
    style:
      left: 50%
      top: 90%
    type: state-label
  - entity: sensor.master_bedroomi_temperatuuri_ja_niiskuse_andur_humidity
    style:
      left: 75%
      top: 94%
    type: state-label
  - entity: sensor.karoliine_toa_temperatuuri_ja_niiskuse_andur_humidity
    style:
      left: 50%
      top: 94%
    type: state-label
  - entity: sensor.kendra_toa_temperatuuri_ja_niiskuse_andur_temperature
    style:
      left: 25%
      top: 90%
    type: state-label
  - entity: sensor.kendra_toa_temperatuuri_ja_niiskuse_andur_humidity
    style:
      left: 25%
      top: 94%
    type: state-label
  - entity: binary_sensor.koridori_liikumisandur_occupancy
    style:
      left: 78%
      top: 52%
    type: state-icon
  - entity: binary_sensor.pesula_liikumisandur_1_occupancy
    style:
      left: 60%
      top: 41%
    type: state-icon
  - entity: binary_sensor.pesula_liikumisandur_2_occupancy
    style:
      left: 70%
      top: 41%
    type: state-icon
  - entity: binary_sensor.0x00158d000123265f_occupancy
    style:
      left: 51%
      top: 41%
    type: state-icon
  - entity: binary_sensor.0x00158d00045a9535_contact
    style:
      left: 38%
      top: 7%
    type: state-icon
  - entity: binary_sensor.pesula_ukse_andur_contact
    style:
      left: 63%
      top: 28%
    type: state-icon
  - entity: binary_sensor.panipaiga_ukse_andur_contact
    style:
      left: 93%
      top: 20%
    type: state-icon
  - entity: binary_sensor.elutoa_suitsuandur_smoke
    style:
      left: 32%
      top: 36%
    type: state-icon
  - entity: binary_sensor.koridori_suitsuandur_smoke
    style:
      left: 65%
      top: 53%
    type: state-icon
  - entity: binary_sensor.kendra_toa_suitsuandur_smoke
    style:
      left: 25%
      top: 71%
    type: state-icon
  - entity: binary_sensor.karoliine_toa_suitsuandur_smoke
    style:
      left: 47%
      top: 71%
    type: state-icon
  - entity: binary_sensor.master_bedroomi_suitsuandur_smoke
    style:
      left: 72%
      top: 71%
    type: state-icon
  - entity: switch.pc
    hold_action:
      action: none
    icon: mdi:desktop-classic
    style:
      left: 44%
      top: 19%
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.projektori_elekter_projektori_elekter
    hold_action:
      action: none
    icon: mdi:projector
    style:
      left: 63%
      top: 18%
    tap_action:
      action: toggle
    type: state-icon
image: /local/Kogu korter taustapilt.png
transform: none
type: picture-elements