Lightbox CSS codes people commonly want to modify

If you want to modify any values from these CSS codes, just replace their values, write !imporant next to this new value, and paste that code into a css file, which is loading on your website, like in WordPress your theme's style.css file and in Joomla some css file from your template

Example of a modified code:

    background-color: red!important;

.n2-lightbox-trigger {
   cursor: hand!important;
   cursor: pointer!important;


Background color
    background-color: rgba(0, 0, 0, 0.8);
Closing X icon size, image, position
.litebox-overlay .litebox-close{
    width: 36px;
    height: 36px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAABGdBT…vNcsmRuX4vc8d6dD9cGMVFL231VGoNUdfFRq2y/t8SS7NvNfRFXoyOLJ8AAAAASUVORK5CYII=) no-repeat center;
    top: 20px;
    right: 20px;
Left arrow image, horizontal position
.litebox-overlay .litebox-prev {
    background: url(../images/litebox-prev.png) no-repeat center;
    left: 20px;
Right arrow image, horizontal position
.litebox-overlay .litebox-next {
    background: url(../images/litebox-next.png) no-repeat center;
    right: 20px;
Both arrow size, vertical position, opacity
.litebox-overlay .litebox-nav {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    opacity: .2;
    top: 50%;
Lightbox image container position
.litebox-overlay .litebox-container {
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
Lightbox image maximum width and height to keep it inside the container
.litebox-overlay iframe, .litebox-overlay img {
    max-width: 100%;
    max-height: 100%;
.n2-lightbox-trigger {
    cursor: zoom-in;
Loading animation
.litebox-overlay .litebox-loader {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 20px;
    top: 20px;
    border: 3px solid #111;
    border-right-color: #fff;
    border-radius: 50%;
    -webkit-animation: liteboxLoader 1s linear infinite;
    -moz-animation: liteboxLoader 1s linear infinite;
    -ms-animation: liteboxLoader 1s linear infinite;
    -o-animation: liteboxLoader 1s linear infinite;
    animation: liteboxLoader 1s linear infinite;
Lightbox caption
.litebox-overlay .litebox-text {
    width: 100%;
    padding: 0 15px;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 12px;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    z-index: 2;
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;

If you want to modify something else, check out  this video to see how you can inspect elements, find the element you want to modify, and create your custom css codes.

How to apply codes to desktop or tablet or mobile only?

Use media queries.

How to make the close button appear on mobile?

The close button is hidden on mobile to improve the user experience. If you want to bring them back, you can use custom CSS.

@media only screen and (max-width: 479px){
    div.litebox-overlay .litebox-close {
        display: block;