Image Classes

  • Resolved eranariel

    (@eranariel)


    4 years, 2 months ago

    Hi,

    Is there a way to create two distinct classes of images in Foo Gallery to which I can assign different CSS filters?

    I am attempting to apply two different hues to different images that when hovered upon will revert to their full color state. In the media library, I can add a unique class to an image, however within the foo gallery, I cannot see the class I have created.

    Please advise and thanks in advance,

    Eran

    The page I need help with: [log in to see the link]

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

  • Hi @eranariel,

    Sorry for the delayed response.

    Instead of adding a unique CSS class to the image, you can use the CSS nth-child selector as shown below:

    .foogallery .fg-item:nth-child(2) img{
    filter: brightness(50%);
    }

    The .foogallery is the CSS class that identifies the gallery. The .fg-item is the div container that contains the image in the element. The nth-child selector will enable you to loop to the image in the .fg-item class you want in the order they appear in the gallery i.e. position 0, 1, 2.. or use code to affect the images in odd or even position e.t.c. For more information on the nth-child selector https://css-tricks.com/almanac/selectors/n/nth-child/.

    If I may be missing something, let me know.

    Kind regards,
    Blaise.

    Hi @eranariel

    We haven’t heard from you in a while, so we presume the problem has been resolved and we’re closing this support ticket.

    However, if you are still experiencing the problem, then please open a new support ticket and we’ll help you come up with a working solution.

    Regards,
    Elvis.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image Classes’ is closed to new replies.