Topic: Lightbox gallery background

Calder free asked 3 years ago

Is it possible to modify the background of the lightbox gallery so that it is an alternative to solid black? I'd like to change the opacity if possible so that a little of the underlying page can be seen.

Roman priority answered 2 years ago

Hi, is there a similar way how to do it in MDB5?

Marcin Luczak staff commented 2 years ago


The class of wrapper element containing background options for the lightbox gallery is .lightbox-gallery. You can change its `background-color value to change its color.

Keep coding, Marcin

Roman priority commented 2 years ago

Hi,Thank you, it is interesting, too. My question was inaccurate. Is it possible to use the white rgba mask on thumbnails like in the snippet

Thank you


Marcin Luczak staff commented 2 years ago

In this case this css styles should work for lightbox thumbnails: `.lightbox img:hover { opacity: 0.8; }

.lightbox img { transition: opacity .4s; }`

Roman priority commented 2 years ago

Thank you, it works as expected.

Marcin Luczak staff commented 2 years ago

You're welcome :)

Keep coding, Marcin

Marcin Luczak staff answered 3 years ago

Hi Calder,

There is no method for changing default background color and opacity for Lightbox Gallery but you can achieve it by changing background-color style of .pswp__bg class, which is responsible for the background color. Please see the CSS tab from my snippet:

Regards, Marcin

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: MacBook Air
  • Browser: Google Chrome Version 86.0.4240.
  • OS: OSX 10.14.6 Mojave
  • Provided sample code: No
  • Provided link: No