Transparent hotspot icon

I want to add pop-up text to a flow diagram where I already have circles with numbers to serve as hotspots. I have tried using a transparent image in Hotspot Icon -> Uploaded Image, but the Icon displays in a white background. I am using Lumi to edit the .h5p file.

Content types: 
villon's picture

Moin  nimalr

you have to look after the properties of png file format exactly here:

look for transparency.





otacke's picture

.h5p-image-hotspotHi Nimalr!

The white default background color is set within the stylesheet of the content type inside the `.h5p-image-hotspot` class. If your image is transparent, than that background color will still show. The behavior seems to be quite deliberate, cmp., but the H5P core team might agree to a toggle switch in the editor here maybe or even allow to select the color (including alpha channel) when an image is used?



Thanks Oliver,
I saw some previous discussions where they suggested changing the css.
For now I have edited the css file and it works fine. An alternative solution is to allow setting the hotspot icon for each hotspot separately so that the hotspots can labeled 1, 2, 3 etc.

villon's picture

Hello nimalr,

I tried to answer, but didn't know about the css specifications. If I have cost you time with a misleading answer, I regret it.
Regards villon