car_view_lovelace.yaml

---
url: /community_plugin/lovelace-card-mod/card-mod.js
type: js

icon: 'mdi:floor-plan'
id: 0
title: Floorplan
cards:
  - type: vertical-stack
    cards:
      - type: picture-elements
        image: /local/Floor0V.png
        style: |
          ha-card {
            --car-back: {% if is_state('sensor.car_back', 'on') %} 34% {% else %} 200% {% endif %};
            --car-center: {% if is_state('sensor.car_center', 'on') %} 45.5% {% else %} 200% {% endif %};
            --car-front: {% if is_state('sensor.car_front', 'on') %} 61.0% {% else %} 150% {% endif %};
          }
        elements:

# garage Car detection        
          - image: /local/garage/bluecar_f.PNG
            style:
              left: 70%
              top: var(--car-back) 
              width: 34.0%
              transition-property: top
              transition-duration: 10s 
              transition-timing-function: ease-in-out
            tap_action: 
              action: none
            type: image
          - image: /local/garage/bluecar_f.PNG
            style:
              left: 70%
              top: var(--car-center) 
              width: 34.0%
              transition-property: top
              transition-duration: 10s 
              transition-timing-function: ease-in-out
            tap_action: 
              action: none
            type: image
          - image: /local/garage/greencar_b.PNG
            style:
              left: 70%
              top: var(--car-front) 
              width: 34.0%
              transition-property: top
              transition-duration: 10s 
              transition-timing-function: ease-in-out
            tap_action: none
            type: image