Image Hotspots, using png files for hotspot



When I upload the png file, the background appears as white. Is there any solution for this? I want to make it invisible or completely invisible in a ring hotspot


BV52's picture

Hi studioka,

 Have you tried using Find Multiple Hotspots? How does it differ from what you would like to achieve? As far as I know transparent images such as png does not work with H5P contents.


papi Jo's picture

Hi studioka,

The problem is not with using a png image for your hotspots. Transparent png images do work fine in H5P. The bug comes from the image-hotspots.css where we find this line:

.h5p-image-hotspot {
  background: #fff;

Simply removing that   background: #fff; line from the CSS solves your problem, as shown in my little animation attached.

Thank you very much for the solution.

Where can we find this css file please, thank you!

papi Jo's picture

Hi jagan,

You'll find that css file here: h5p\libraries\H5P.ImageHotspots-1.8\styles\image-hotspots.css

Can you give some more information on how to do this edit?

papi Jo's picture

Hi studioka,

I hope you found my reply useful.

Can you give more information on how to do this edit?