picture-element big black circle when clicking image element (and maybe other questions) | Home Assistant | Page 1

quasi pier Jul 22, 2025, 5:41 PM

#

Update: So far my main problems are solved. Thanks @safe phoenix

Since I don't want to make (yet) another thread, I leave it open a while.

What I still try to figure out, if even possible:

if I can make the ripple transparent on a element basis. don't want to create a new theme for that.
making the state-icons size relative to the image size, so it smaller on smaller screens. what I found so far doesn't work.

Hi. I'm recreating my floor plan from scratch. I might be too stupid to google, but I didn't find anything.

I get a big black circle when I click on the image element.

It has to do something with that element state. When the state is on, the circle is oval

It goes away when the browser loses focus.
This is on Firefox. The same happens in edge, only that there is a barely visible transparent white circle.
***Edit: *In a Firefox Private Window, it's also a barely visible transparent white circle, like in Edge. I disabled all addons, but that didn't help.
Also the white does not look so nice, anyway to remove it completely? ( pointer-events: none; does not seem to help)
Edit2: Somehow I thought its possible that it only clicks on the area that is not fully transparent. The problem remains tho, with an defined area, it just draws that big circle in the whole area.

image: /local/floorplan/BG_day.png
elements:
  - entity: light.licht_schlofzimmer
    style:
      left: 50%
      top: 50%
      width: 100%
    type: image
    state_image:
      "on": /local/floorplan/light_on_schlofzimmer.png
      "off": /local/floorplan/transparent.png
    tap_action:
      action: toggle
grid_options:
  columns: full

#

picture-element big black circle when clicking image element (and maybe other questions)

quasi pier Jul 22, 2025, 8:57 PM

#

another issue I have is, the background should be different on day/night, so I solved that with card_mod. Only the card_mod section is removed everytime I've changed anything via the UI menu. Is there a workaround for that?

image: /local/floorplan/transparent_sized.png
elements:
  - entity: light.licht_schlofzimmer
    style:
      left: 50%
      top: 50%
      width: 100%
    type: image
    state_image:
      "on": /local/floorplan/light_on_schlofzimmer.png
      "off": /local/floorplan/transparent.png
    tap_action:
      action: toggle
grid_options:
  columns: full
card_mod:
  style: |
    ha-card {
      {% if is_state('sun.sun','below_horizon') %}
        {% set IMAGE = '/local/floorplan/BG_night.png' %}
      {% else %}
        {% set IMAGE = '/local/floorplan/BG_day.png' %}
      {% endif %}
      background-size: 100% 100%;
      background-image: url({{IMAGE}});
    }```

#

the edit2 from my OP looks now like this:

quasi pier Jul 22, 2025, 9:47 PM

#

problem nr 3:
The shapes I made to be clickable, only work where the ovale circle did fit in. In this example only the small upper part. The rest shows a click mouse cursor, but nothing happens when clicking.

    image: /local/floorplan/transparent_sized.png
    style:
      border-color: red
      border-style: solid
      border-width: 1px
      height: 35%
      left: 87%
      top: 94%
      width: 8%
      opacity: 110%
      transform: translate(0,-100%)
      z-index: 10
    tap_action:
      action: toggle
    type: image
    name: Balkon Click Area

safe phoenix Jul 22, 2025, 10:24 PM

#

For Problem 2 you can define a conditional element that shows your background when it's after sunset.

#

conditions:
  - condition: state
    entity: sun.sun
    state: below_horizon
elements:
  - type: image
    style:
      transform: none
      left: 0%
      top: 0%
    image: /local/pokemon_nacht.png```

quasi pier Jul 22, 2025, 10:35 PM

#

safe phoenix ```type: conditional conditions: - condition: state entity: sun.sun st...

thanks! that works. I tried something like that earlier, and wasn't able to click anything. I do have to add z-index on all elements now (as negative z-index does not work), but is still the better solution.

safe phoenix Jul 22, 2025, 10:37 PM

#

If you place that as first element it should be drawn in the background. The order of elements matters. Last element added is always on top of the final card. No need for manual z-index, normally.

quasi pier Jul 22, 2025, 10:37 PM

#

safe phoenix If you place that as first element it should be drawn in the background. The or...

yeah it is already the first element

safe phoenix Jul 22, 2025, 10:38 PM

#

It's strange you have such a fight with your plan. It doesn't seem that different to what most people do.

#

Do these black circles appear if you click an icon? Or only if you click an image?

quasi pier Jul 22, 2025, 10:41 PM

#

And I've already done already an extensive one. Except from that, the challenge seems to be in creating a area where I want to be able to turn off lights, instead of just a state-icon.

#

Yes the black circles is the background color change when clicking on an icon.

#

just so strange when its an image or area

safe phoenix Jul 22, 2025, 10:42 PM

#

Do you have a custom theme enabled?

quasi pier Jul 22, 2025, 10:43 PM

#

oh my god. this is it.

#

it's on my desktop firefox only. that why it works in edge and private tab

#

"works" in the meaning that it is now a very transparent one.

safe phoenix Jul 22, 2025, 10:45 PM

#

Eureka! It's the ha-ripple-effect or something along those lines that it set to black

quasi pier Jul 22, 2025, 10:47 PM

#

will look into it if I want to remove it completely.
The problem remains, that this circle only partially fills out a image (specially when high and not wide), and you can only click there

safe phoenix Jul 22, 2025, 10:50 PM

#

--mdc-ripple-color: transparent
-webkit-tap-highlight-color: transparent

#

These should do the ripple thing

quasi pier Jul 22, 2025, 10:54 PM

#

yeah I found the same thread 🙂 doesn't work on the element itself tho. (yet)

safe phoenix Jul 22, 2025, 11:02 PM

#

The last one has to do something with you way of positioning. On mine it always uses the complete image as a clickable field even if I deliberately scale it into wonky shapes. But I used transform: none in my experimenting right now, went from there...

quasi pier Jul 22, 2025, 11:05 PM

#

transform: none doesn't make a difference. but good to know that it should be possible

#

interestingly, the corners outside the circle work, but all that's below it doesn't

safe phoenix Jul 22, 2025, 11:05 PM

#

Yeah i was just able to recreate it

#

I have the same issue if I scale it i.E. width 30% height 100%

quasi pier Jul 22, 2025, 11:09 PM

#

if I use absolute px, it's still there

safe phoenix Jul 22, 2025, 11:12 PM

#

Changing the aspect ratio changed the click area. But messed up the image for me

#

You could create a workaround by having a transparent picture just overlaying what should be clickable and changing aspectratio for the transparent layer

quasi pier Jul 22, 2025, 11:14 PM

#

I already have that, but not with aspectratio. will try

#

nice, found the solution

    image: /local/floorplan/transparent.png
    style:
      border-color: red
      border-style: solid
      border-width: 1px
      height: 35%
      left: 91%
      top: 76%
      width: 8%
      opacity: 100%
      z-index: 20
    aspect_ratio: 8:35
    tap_action:
      action: toggle
    type: image
    name: Balkon Click Area```

just use the numbers from % width and hight

#

it's only needed in portrait shaped areas

#

all problems solved. thank you very much @safe phoenix

#

I'll try to figure out if I can make the ripple transparent on a element basis. don't want to create a new theme for that.

#

I'm also stuck at making the state-icons size relative to the image size, so it smaller on smaller screens. what I found so far doesn't work.

#picture-element big black circle when clicking image element (and maybe other questions)