Picture elements card: make images to be `transparent` for `tap_action`

Configuration Frontend
1

There is a Picture elements card (just an example):

type: picture-elements
elements:
  - type: state-icon
    entity: input_boolean.test_boolean
    icon: mdi:car
    state_color: true
    style:
      top: 10%
      left: 30%
  - type: image
    image: /local/images/pink_mask.png
    style:
      top: 20%
      left: 10%
      transform: translate(0,0)
    tap_action: none
image: /local/images/blue.jpg

image

Clicking on the icon displays a “more-info” dialogue - this is OK.

Now lets imagine that the image has transparent areas which are ABOVE the icon (the example below has seni-transparent area - just to be visible).
image
And now the “tap_action” does not work for the icon - because it is first captured by the image.

Surely we can place the icon ABOVE the image:

type: picture-elements
elements:
  - type: image
    ...
  - type: state-icon
    ...
image: /local/images/blue.jpg

And now the tap_action works again for the icon.

My proposal is - lets provide a “pass the action” feature for images inside Picture elements card:

  • if tap_action is explicitly specified for the image as “none” - then pass the mouse event to the next element in Z-order.

Created FR: