You are welcome!
Happy rendering 
Thank you!
Just had a thought, is there a way of using CSS or something to make the transition from the overlay image more linear? It’s very sharp and sudden, i’d like it to ‘fade’ in.
Example -
For sure. That’s something I’m also interested in.
That may very well be possible with card-mod and some advanced CSS. Look into keyframes, that’s what is used for animations.
One thing I’ve noticed is it’s not very good at displaying any light colours. Yellow, light blue, green etc. Or have I still got an issue?
Example -
My hue play lights are good at showing green but my hue bulbs aren’t?
You are right. And even in 100% brightness its more white than the actual color itself.
I don’t have that behaviour, my colors show quite nicely.
Do you have an example of a yellow or green?
Oh that is strange. Your colours look great! You seem to be using a different method to what @Christian-CFP is using (and now me). Think I’ll have to download your code again and have a run through to see why it’s so different looking. Are you still using the white and red renders?
Yes, white renders are for any standard white bulb (dimmable or not) and all my color lights are rendered red.
@CDRX2 iam trying to adopt your config, iam getting there but for some reason it looks like the opacity sensor is not working. hen i code a fixed value i see no errors, but when i put back ‘${ states[’‘sensor.sunlight_opacity’‘].state }’ , i get an error at the bottom left in the lumieres view.
i tried your philosophy splitting up the yaml files but can’t get it to work.
- type: 'custom:config-template-card'
entities:
- sun.sun
- sensor.sunlight_opacity
element:
action: none
entity: sun.sun
hold_action:
action: none
state_image:
above_horizon: /local/Huis/basis-dag.png
below_horizon: /local/Huis/transparent.png
tap_action:
action: none
type: image
card_mod:
style:
left: 50%
top: 50%
height: 100%
width: 100%
mix-blend-mode: lighten
opacity: '${ states[''sensor.sunlight_opacity''].state }'
tap_action:
action: none
type: image
title: Home
button_card_templates: !include_dir_merge_named button_templates/
decluttering_templates: !include_dir_merge_named decluttering_templates/
apexcharts_card_templates: !include_dir_merge_named apexcharts_templates/
sensors: !include_dir_merge_named sensors/
views:
#############################################################################################################################################
# #
# Floorplan View #
# #
#############################################################################################################################################
- title: Penthouse test
icon: 'mdi:lightbulb-group'
panel: true
path: lights
cards:
- type: 'custom:decluttering-card'
template: floors
variables:
- sidebar: !include frontend/sidebar.yaml
- card_rez: !include frontend/lights_rez.yaml
- card_1er: !include frontend/lights_1er.yaml
- card_2e: !include frontend/lights_2e.yaml
- time_date: !include sensors/time_date.yaml
- diverse: !include sensors/diverse.yaml
- weather_climate: !include sensors/weather_climate.yaml
this is what i got.
Hi,
If you check your entity states, do you have a value between 0 and 1 showing for sensor.sunlight_opacity? That is a template sensor defined in the sensors/weather_climate.yaml file, so make sure the first two entries in that file are not commented out.
Thank you for the quick reply.
When i look the sensor up it gives a valeau of 0.32.
This part gives the problems for me.
- type: 'custom:config-template-card'
entities:
- sun.sun
- sensor.sunlight_opacity
element:
action: none
entity: sun.sun
hold_action:
action: none
state_image:
above_horizon: /local/Huis/basis-dag.png
below_horizon: /local/transparent.png
tap_action:
action: none
type: image
style:
left: 50%
top: 50%
height: 100%
width: 100%
mix-blend-mode: lighten
opacity: '${ states[''sensor.sunlight_opacity''].state }'
fyi, this is working but i don’t understand why?
- action: none
entity: light.keuken_verlichting
hold_action:
action: none
image: /local/Huis/Klaar/keuken.png?version=1
state_filter:
'off': opacity(0%)
'on': opacity(100%)
style:
left: 50%
mix-blend-mode: lighten
top: 50%
width: 100%
opacity: >-
${states['light.keuken_verlichting'].state === 'on' ?
(states['light.keuken_verlichting'].attributes.brightness
/ 255) : '0'}
tap_action:
action: none
type: image
Hard to tell, but I’d definitely try to put your opacity code on a second line with >- like you did in the working example. Wondering if it’s something to do with the quotes 
i put your code back and tried your suggestion with the >- but nothing happend.
When i can see the error compleet and it says that “custom element doesnt exist:config-template-card” but i have that one installed. it is referring to the first code.
Problem is the config-template-card.
when i use;
################### Picture Elements Card #####################
type: picture-elements
image: /local/Huis/basis-nacht.png
card_mod:
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1);
}
view_layout:
grid-area: main
elements:
######################### DAY BASE FLOORPLAN OVERLAY #########################
- action: none
entity: sun.sun
hold_action:
action: none
state_image:
above_horizon: /local/Huis/basis-dag.png
below_horizon: /local/transparent.png
tap_action:
action: none
type: image
style:
left: 50%
top: 50%
height: 100%
width: 100%
mix-blend-mode: lighten
opacity: '${ states[''sensor.sunlight_opacity''].state }'
it is working but the next hurdle is
type: 'custom:config-template-card'
entities:
- light.kantoor_lees_lamp
element:
action: none
entity: light.kantoor_lees_lamp
hold_action:
action: none
image: /local/transparent.png
state_image:
'on': /locla/Huis/Klaar/kantoor_lees_lamp.png
tap_action:
action: none
type: image
style:
left: 50%
mix-blend-mode: lighten
opacity: "${states['llight.kantoor_lees_lamp'].state === 'on' ? (states['light.kantoor_lees_lamp'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
that also gives me the “custom element doesnt exist:config-template-card” error.
have this installed but can’t get it to work
That’s because your indentation is off. Everything below type: custom:config-template-card should move two spaces to the left 
Think something went wrong with coping the code, the indentation is correct 
Tis is working ecept the config template card. 9 thats why at floorplan overlay i removed it)
looks to me the config template is not loaded, i having the same problem with the big slider card and the slider entity row.
type: picture-elements
image: /local/Huis/basis-nacht.png
card_mod:
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1);
}
view_layout:
grid-area: main
elements:
######################### DAY BASE FLOORPLAN OVERLAY #########################
- action: none
entity: sun.sun
hold_action:
action: none
state_image:
above_horizon: /local/Huis/basis-dag.png
below_horizon: /local/transparent.png
tap_action:
action: none
type: image
style:
left: 50%
top: 50%
height: 100%
width: 100%
mix-blend-mode: lighten
opacity: '${ states[''sensor.sunlight_opacity''].state }'
######################### WEATHER ANIMATION OVERLAYS #########################
- type: 'custom:decluttering-card'
template: climate_overlay_rain
variables:
- state: pouring
- type: 'custom:decluttering-card'
template: climate_overlay_rain
variables:
- state: rainy
- type: 'custom:decluttering-card'
template: climate_overlay_rain
variables:
- state: lightning-rainy
- type: 'custom:decluttering-card'
template: climate_overlay_snow
variables:
- state: snowy
- type: 'custom:decluttering-card'
template: climate_overlay_snow
variables:
- state: snowy-rainy
######################### INDIVIDUAL LIGHTS - BLENDED IMAGE OVERLAYS #########################
- type: 'custom:config-template-card'
entities:
- light.kantoor_lees_lamp
element:
action: none
entity: light.kantoor_lees_lamp
hold_action:
action: none
image: /local/transparent.png
state_image:
'on': /local/Huis/Klaar/kantoor_lees_lamp.png
tap_action:
action: none
type: image
style:
left: 50%
top: 50%
width: 100%
Edit: sorry, didn’t see your code at the bottom.
There’s still an action: none too many in your latest code.