adjust image brightness in imageoverlay using leaflet

Question

I am using image overlay in leaflet.How can I adjust image brightness? I don't want to use opacity.How can I apply filter brightness to image without DOM manipulation? Is there any way to override image attributes in overlay?

L.imageOverlay(imageUrl, bounds).addTo(map);

How to adjust brightness?

Answer 1

Have you looked into the CSS brightness filter? - https://developer.mozilla.org/en-US/docs/Web/CSS/filter#brightness()

.leaflet-image-layer {
    -webkit-filter: brightness(0.5);
    filter: brightness(0.5);
}