CSS example; Full image height with captions and button brightness

  • Resolved Bjarne Oldrup

    (@oldrup)


    8 months, 4 weeks ago

    Just sharing the styling changes I use to make the plugin suit my needs. I have some portrait screenshots, where it’s important I can see the entire image, so I make the images slightly smaller, allowing for the caption to be shown below it. Also, the buttons are a bit too dark for my preference.

    Just to illustrate how easy it is to customize a plugin that outputs sensible CSS classes and ID’s

    /** Lightbox for Gallery & Image Block **/

    /* Make some room at the bottom of the image for the caption */
    #baguetteBox-overlay .full-image img {
        max-height: calc(100vh - 48px);
    }

    /* Increase brightness of the buttons making them easier to see */
    .baguetteBox-button svg {
        filter: brightness(150%);
    }

    Thank you for a great plugin!

    /Bjarne

  • The topic ‘CSS example; Full image height with captions and button brightness’ is closed to new replies.