Custom CSS Thumbnail hover not working since update

  • Resolved jonnymb74

    (@jonnymb74)


    9 years, 8 months ago

    Hi there,

    Since updating to 2.1.50, the custom CSS previously used to change the hover effect of my thumbnails within the gallery no longer works? I have cleared my browser cache.

    The custom CSS previously used within Gallery > Other options > Styles > File Content, is as follows:

    /*
    Thumbnails
    */
    .ngg-gallery-thumbnail img {
    border:none !important;
    }
    .ngg-gallery-thumbnail img:hover {
    background-color:#d1bd9a !important;
    }

    …as you can see from the code, the effect I had consisted of no border until the mouse hovered over the image, at which point the border appeared to highlight the relevant image.
    Since the update the above effect no longer works and all the thumbnails within my gallery now have a thin static black border around them.

    Your help to return the effect back to how I had it previously would be much appreciated.

    Many thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor photocrati

    (@photocrati)

    9 years, 8 months ago

    @jonnymb74 – A link to your site where you are seeing this would be most helpful.

    Thanks!

    – Cais.

    Thread Starter jonnymb74

    (@jonnymb74)

    9 years, 8 months ago

    …sorry: http://www.reefraff.co.uk/gallery/

    Plugin Contributor photocrati

    (@photocrati)

    9 years, 8 months ago

    @jonnymb74 – Have you tried dropping the img parts of the selectors you are using?

    Unfortunately with most any plugin customizations, even if using update “safe” methods, there is always a chance they may need to be adjusted after a plugin is updated.

    Thanks!

    – Cais.

    Thread Starter jonnymb74

    (@jonnymb74)

    9 years, 8 months ago

    Thank you Cais.

    I’ve dropped the ‘img’ parts from the code.

    As you will see if you once again follow my link above, this has almost solved my problem. Halfway there!

    The only problem now is that the thumbnail frame/border does not appear like I would like it to when you hover over it? It should appear in my colour choice.
    I tried again with ‘img’ part placed back in to the last (hover) line only, and removed from the first (border) line, but no luck.

    So, my custom CSS code currently stands as follows:

    /*
    Thumbnails
    */
    .ngg-gallery-thumbnail {
    border:none !important;
    }
    .ngg-gallery-thumbnail :hover {
    background-color:#d1bd9a !important;
    }

    Many thanks!

    Plugin Contributor photocrati

    (@photocrati)

    9 years, 8 months ago

    @jonnymb74 – You should be using the following element:

    .ngg-gallery-thumbnail img:hover

    … and defining its border property. Give the following a try:

    .ngg-gallery-thumbnail img:hover {
    border: solid #d1bd9a !important;
}

    Unfortunately sometimes custom CSS involves some trial and error but I believe the above will get you closer.

    Thanks!

    – Cais.

    Thread Starter jonnymb74

    (@jonnymb74)

    9 years, 8 months ago

    That’s solved it, thank you very much!

    The gallery seems to jerk and jump around now as you hover over each image, which it didn’t do before?
    It’s like the border forces the images to move around slightly? Do you know why this is?

    Many thanks.

    Plugin Contributor photocrati

    (@photocrati)

    9 years, 7 months ago

    @jonnymb74 – The border has a width, which is taken into account while the display is rendered. Since the border is adding width to the container the image is being displayed in browsers will generally dynamically adjust for that change. Thus you see a “jump” effect …

    – Cais.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Custom CSS Thumbnail hover not working since update’ is closed to new replies.