Custom CSS by categories

[sjg123]

Hello,

I am trying to create a filter effect on a thumbnail grid.

I have 3 categories on my menu, let's say A, B and C. Each page is a thumbnail grid showing every project thumbnails. But I want that when I click on A, projects thumbnails from categories B and C change opacity.

I managed to target the page already with:

.slug-A .thumb {opacity: 0.5;}

Now, every thumbnail changed. But when I target the category:

.slug-A [data-id=“4”][data-type="category"] .thumb {opacity: 0.5;}

It doesn't work anymore.

I hope I am clear enough. Does anyone know what I am doing wrong? Thanks!

[mariusjopen]

Hi sjg123,

without seeing the actual site it is a bit difficult to imagine.

For me this sounds more like you need a bit of jQuery to solve this problem. I am not sure if you can do this with pure CSS.

Let me know how things are going!

All the best!

Marius

[sjg123]

Hello @mariusjopen ,

Thanks a lot for your reply. Unfortunately I am working offline for now, so it is not possible to show you the website. But you can see an exemple of what I am trying to achieve here.

I made a thumbnail grid with all my categories and I am tryting to target the different categories separately, in order to change their opacity.

I don't know much about jQuery yet, so I will have to look more into it then...

Thanks!

[mariusjopen]

Hi sjg123!

This looks indeed like you need to use jQuery.

It will not be that difficult.

You just need to get the class of the category you click on. And then find all the other elements with the same class and give them a class called active.

Roughly like that.

Good luck with this!

Marius