Overlaying Images

I am attempting to create a “real” map of my home using picture-elements, and when something happens, I want to overlay a new replacement picture just for that portion of the image. For example, when there is motion in the driveway, “highlight” that motion by overlaying a new image on top of the old one with transparency everywhere except the driveway.

My attempts to do this so far look like this:

title: Floorplan
icon: mdi:shield-home
panel: true
cards:
  - type: picture-elements
    image: /local/images/downstairs-security.png
    title: Downstairs
    elements:
      - type: image
        entity: binary_sensor.driveway_motion
        image: /local/images/driveway-motion.png
        filter: opacity(0.0)
        aspect_ratio: 100%
        state_filter:
          "on": opacity(1)
        style:
          z-index: 10

Both of the images are exactly the same size, so if overlayed relative to the same pixel with appropriate z-index they would work perfectly (transparency showing the lower image where appropriate).

For testing, I remove the filter stuff - not important for this problem. When displayed, the driveway-motion image is never overlayed as I would expect. Either z-index does not do anything, or I am not understanding what it does :-). When I check the properties in my browser of the second element, I see that it is sized 0x0. What am I doing wrong?

  • Ben
1 Like

Im faccing the same issue did you find any solution ?

as more items i add the start to overlap so i need to turnoff others before gettint to the one i got i belive the issue its the transparent image but im not sure