Search code examples
jquerycssfotorama

Fotorama transparent background


I'm using the Fotorama slider plugin, where you can open an image in fullscreen. I need the background to be transparent, but I can't seem to change it.

You can see what I mean by clicking on this link and open one of the images in the small slider in full screen.

I have tried to change all background in the slider to the following:

background: rgba{0,0,0,0);

Solution

  • It is possible - I figured it out myself with the following code:

    .fullscreen .fotorama--fullscreen {
        background: transparent !important;
    }
    
    .fullscreen .fotorama__wrap {
        background: rgba(0,0,0,0.7) !important;
    }
    
    .fullscreen .fotorama__img {
        top: 0px !important;
        width: 50% !important;
        height: auto !important;
        margin: auto !important;
        left: 0px !important;
    }