Category Tile Overlay

Hi, I wish to change the colour of the overlay for the first 3 categories and have the next 3 a different colour. I currently have this code ‘ div.cat-design-center .wrapp-category:before,
.wrapp-category:before {
background-color: rgba(69, 113, 91, 1);
}
‘ which changes the overlay colour for all the categories, I just want this applied to the first 3 categories though (I will attach a screenshot showing the 3 I mean).

Any advice on how to achieve this would be greatly appreciated, thanks!

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you added. You cannot achieve your requirements with Custom CSS
Because it uses the same classes that’s why the changes you are trying to make effect all the categories.

You need to create separate rows for each set of 3 categories you want to add background color.
From Edit page with WPBakery Page Builder >> Product Categories.

Screenshot for Clarification: https://www.screencast.com/t/DhnBpLmHFj

Then you can edit each row and add background color accordingly.
Screenshot for Clarification: https://www.screencast.com/t/ZiUG3iHJ

Best Regards.

Hi, I only want to change the overlay colour of the image, not the background colour of the row. Is this possible? Thanks

Hello,

You can apply overlay effect but this is not possible to apply that effect on 3 of them and did not applied it on other categories. Because all those categories included in the same element.

You can use the below CSS code in page CSS area in which you display those categories:

.cat-design-center .wrapp-category:before,
.wrapp-category:before ,.cat-design-replace-title .wrapp-category:before  {
background-color: blue;
}

I used blue color just to set an example for you. You can use any other. That overlay will display on hover. On hover dark overlay shown with defined color otherwise the color remains light.

Screenshot for clarification: https://jmp.sh/7Y2YIU2

Best Regards.

[Author]

Posts