Show title overlay in overview only for specific category

Hi @bhoehner ,

Go to Appearance → Customize → Additional CSS (the menu labels might be different in your language) and try the code below:

.post-preview:hover header,
.post-preview:hover .preview-image:after { opacity: 0; }

.post-preview.category-lifestyle:hover header,
.post-preview.category-lifestyle:hover .preview-image:after { opacity: 1; }

That will make it so that only the “Lifestyle” category has the hover effect. Replace the “lifestyle” string with the slug of the category, which you can find by going to Admin → Posts → Categories. If you want to do this with multiple categories, replicate the second block of code like this:

.post-preview:hover header,
.post-preview:hover .preview-image:after { opacity: 0; }

.post-preview.category-lifestyle:hover header,
.post-preview.category-lifestyle:hover .preview-image:after { opacity: 1; }

.post-preview.category-meta:hover header,
.post-preview.category-meta:hover .preview-image:after { opacity: 1; }

Let me know if that does it.

— Anders

Hi @anlino,

Thanks for your swift feedback on this. Unfortunately this doesn‘t work. I try to apply it on the categories women, men

.post-preview:hover header,
.post-preview:hover .preview-image:after { opacity: 0; }

.post-preview.category-women:hover header,
.post-preview.category-women:hover .preview-image:after { opacity: 1; }

.post-preview.category-men:hover header,
.post-preview.category-men:hover .preview-image:after { opacity: 1; }

Nothing changes. Both are subcategories. Could this be a reason? Tried the main cat too but no luck either.

I also wonder how to alter the font style on the overlay. While i can adjust the size through the .post-preview class, color changes don‘t seem to work even if forced through !important…

Thanks again for your help with this
Best
Benjamin

Hi @anlino,
I realize that your solution works if titles only show on hover. However, I would like to show header for some categories permanently and not at all on the others.
I was also still not able to change the color of the overlay header ??

Thanks for your help
Best
Benjamin