Why doesn't fluidbox overlay?

Found a great tool terrymun.github.io/Fluidbox/demo/index.html
Allows you to zoom the image.
Hooked up, everything works.
I want to add darken the background, after the approach of pictures, but I can't.
The article under Customising overlays write about it.

Here is an excerpt from my gallery of pictures

<div class="grid-item event">
 <a href="photo/event1.jpg" class="overlay-3">
 <img src="photo/event1.jpg">
</a>
</div>
 <div class="grid-item event">
 <a href="photo/event2.jpg" class="overlay-3">
 <img src="photo/event2.jpg">
</a>
 </div>


So I'm trying to add a blackout

.fluidbox-overlay {
 .overlay-3 & {
 background-color: transparent; /* To override default style */
 background-image: linear-gradient(
 to top left,
rgba(130,168,158,0.85),
rgba(134,150,173,.85)
);
}
 }


But nothing has changed. What am I missing ?
Have the class fluidbox-overlay somewhere to stick ? Or is it a built-in class...
Please help
June 10th 19 at 15:38
1 answer
June 10th 19 at 15:40
Solution
they have so works
.overlay-2 .fluidbox__overlay {
 background-color: transparent;
 background-image: linear-gradient(to top left,rgba(130,168,158,.85),rgba(134,150,173,.85));
}

<a href="http://i.imgur.com/keuMHNt.jpg" class="col-2 overlay-2 fluidbox__instance-20 fluidbox fluidbox--initialized--ready--opened fluidbox fluidbox--loaded">

... here the and blackout :
<div class="fluidbox__overlay" style="z-index: -1; opacity: 1;"></div>

</a>

Find more questions by tags Web DevelopmentjQueryJavaScript