Support » Plugins and Hacks » [Resolved] NextGen 2.0.11 – removing borders from thumbnails

[Resolved] NextGen 2.0.11 – removing borders from thumbnails

  • my previous settings have been replaced during this update and I would like to remove all the borders from my thumbnails or change them to the colour of my background.

    also I did have a line of text to enlarge the image under the mouse (hover) but can’t work out how to do it now


Viewing 15 replies - 1 through 15 (of 51 total)
  • Try this in other options->styles->css customization

    /* Thumbnails */
    .ngg-gallery-thumbnail img, .ngg-thumbnail img {
    background: none !important;
    border: none !important;
    padding: 0px;

    If you want to change color, play it with Firebug or Chrome, and obviously remove “none”. You could add a box-shadow if you want for a cool effect. Look at CSS school pages and you can do it by yourself.

    This should work:

    .ngg-gallery-thumbnail img {
    .ngg-gallery-thumbnail img:hover {

    oops tizz was faster.

    The! “!important” is important. 😉

    thank you both sooooo much. Could you possibly advise on a line of code so that the image enlarges when the mouse hovers over?

    Try this
    However, they could result pixelated. Replace the class name with those of nextgen.

    Thanks fizz
    should i use the css or the html option?
    and when you say replace the class name with those of nextgen, what code would I be looking for ? not quite sure what i put, or where!

    CSS, .ngg-gallery-thumbnail img:hover

    play it with Firebug or Chrome

    when I try that it does enlarge to twice the size but at least half of it is behind the other images. is there a way to do it so it comes up in front of
    the surrounding images?

    Not with CSS, but with javascript e.g.
    What you want is similar to lightbox, so can I ask you why don’t you use the Nextgen default shutter effect, that opens the image in a box in front of the others?

    don’t know anything about nextgen default shutter effect. Am a total newbie. So sorry if being thick. website is http://www.zanchit.co.uk and the galleries are all the same: http://www.zanchit.co.uk/adults would be a sample. Any advice on how to program so could have enlargement on mouseover would be fantastic. But you might have to speak slowly (blonde!)

    Please try this:

    .ngg-gallery-thumbnail-box {
    -moz-transition:-moz-transform 0.1s ease-in;
    -webkit-transition:-webkit-transform 0.1s ease-in;
    -o-transition:-o-transform 0.1s ease-in;
    .ngg-gallery-thumbnail-box:hover {

    that’s definitely better, but the enlarged image is blurred. also it just zooms which means it crops the image. i have done it and it is live on http://www.zanchit.co.uk/adults can you see what I mean?
    i think what i would prefer, it it were possible would be for the full sized image to show on mouseover. is that possible?

    Actually, I think the problem is that the zoom is hindered by the edges of the central column. ie the top row end up with the top edge cropped, the bottom row with the bottom edge and the sides with the relative side cropped.

    @w.bear You posted the content of the page I’ve linked up above.
    zanchit has already try it and from there started his subsequent questions.

    @zanchit I’m talking about something that you already have. Have you ever clicked on your images? It’s not a mouseover, but that’s how the majority of galleries work, with that lightbox.
    Enlargement on mouseover, in the way you want now, it’s not two lines of code, you need a script or a plugin.

    I think I may well have to make do with a minimal zoom on hover, i.e. just a few percent increase. What would I put for the code to make that happen?

Viewing 15 replies - 1 through 15 (of 51 total)
  • The topic ‘[Resolved] NextGen 2.0.11 – removing borders from thumbnails’ is closed to new replies.