Different color overlays based on category

  • Resolved RevolutionDude

    (@revolutiondude)


    4 years ago

    Hi,

    First, thank you so much for this awesome plugin!

    I’m wondering if there’s a way to change the color overlay in a single layout to change depending on the different categories. I know I can target the vp-items-style-fade–overlay__background-color and that works great if I want to change the background color of all the items, but how would I do it based on a targeted category?

    For example, I have one page with one layout showing images were my categories are “Planet” “Product” and “People”. When I hover over an image that is in the “Planet” category, I’d like for the color overlay to be green. If I hover over one that is in the “Product” category, I’d like to be blue, etc.

    How would you recommend I achieve this? Can I do this with CSS, JS, or in the PHP?

    Thank you!

Viewing 1 replies (of 1 total)
  • Plugin Author Nikita

    (@nko)

    Hey.

    Each item contains the attribute data-vp-filter with categories, you can try to use it in your custom CSS:

    Example:

    [data-vp-filter*="fashion"].vp-portfolio__item-wrap { ... }

    Regards, nK.

Viewing 1 replies (of 1 total)
  • The topic ‘Different color overlays based on category’ is closed to new replies.