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