#picture-elements CSS transition not working

1 messages · Page 1 of 1 (latest)

compact light
# 
type: custom:config-template-card
variables:
  LETTER_LAMP: states['light.letter_lamp'].attributes.brightness
  SHELF_CLOCK: states['light.shelf_clock_main'].attributes.brightness
  PC: states['switch.wol_davis_desktop'].state
entities:
  - light.letter_lamp
  - light.shelf_clock_main
  - switch.wol_davis_desktop
card:
  type: picture-elements
  elements:
    - type: image
      camera_view: auto
      title: Letter Lamp Glow
      tap_action:
        action: none
      hold_action:
        action: none
      image: local/davis_room/letter_lamp_glow.png
      style:
        left: 50%
        top: 50%
        width: 100%
        opacity: ${LETTER_LAMP / 255}
        transition: opacity 1s
    - type: image
      camera_view: auto
      title: Shelf Clock Glow
      tap_action:
        action: none
      hold_action:
        action: none
      image: local/davis_room/shelf_clock_glow.png
      style:
        left: 50%
        top: 50%
        width: 100%
        opacity: ${SHELF_CLOCK / 255}
        transition: opacity 1s
    - type: image
      camera_view: auto
      title: Shelf Clock Glow
      tap_action:
        action: none
      hold_action:
        action: none
      image: local/davis_room/pc_glow.png
      style:
        left: 50%
        top: 50%
        width: 100%
        opacity: "${PC === 'on' ? 1 : 0}"
        transition: opacity 1s
  state_filter: {}
  image: local/davis_room/room_off.png```
compact light
#

there are several images, each of their opacity values are changed based on the brightness of my lights. I can't seem to get a smooth transition to work

compact light
#

nvm, figure it out. I switched from using custom:config-template-card over to fully using card_mod

#

here's the updated yaml