Blog Thumbnail Opacity

Resolved rodario
(@rodario)

4 years, 8 months ago

Hello

I would like to ask if there is a setting I’ve overlooked to change the opacity of post thumbnails. I’d like them to be a little bit less opaque as it is currently very hard to see anything of the image at all.

Thanks and have a great day 🙂

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

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

thudy
(@thudy)

4 years, 8 months ago

I have exactly the same problem in the layout of the covers.
The thumbnails of the images are very dim and invisible.
luciamarinescu
(@luciamarinescu)

4 years, 7 months ago
Hi @rodario and @thudy!

Please insert the code below in the Additional CSS section within the Customizer. It should remove that dark overlay of the thumbnails.
```
.archive .cover-post:after {
     background-color: rgba(0,0,0,0) !important;
}
```
Let me know how this worked!

Have a nice day!
thudy
(@thudy)

4 years, 7 months ago

Thank you for your answer. The pages work, but the home page remains unchanged.

luciamarinescu
(@luciamarinescu)

4 years, 7 months ago

@thudy the code provided above targets only the thumbnails from the blog page. If you encounter problems on other pages, please open a new topic describing your issues and provide us the URL to your site.

Thank you!
Thread Starter rodario
(@rodario)

4 years, 7 months ago
@luciamarinescu Thank you for your reply 🙂

Follow up: If I wanted *some* opacity, but less than currently, would I be able to adjust these 0s to achieve that? And if yes, which? All?

Actually, I felt stupid for asking and just tried and for anyone else googling this issue and finding my comment: “Never mind, solved it.”

J.k. it’s the last number as a decimal. the standard setting of the theme is .75, lower number = decreased opacity of the overlay = clearer image.

For my taste, .6 looks good. Image is recognizable and title text is readable.
- This reply was modified 4 years, 7 months ago by rodario.
Theme Author Themeisle
(@themeisle)

4 years, 7 months ago

Hi @rodario,

You can adjust the code provided by @luciamarinescu by changing the last parameter of the rgba(0,0,0,0) function. The last parameter has a step of 0.1, so you can try rgba(0,0,0,0.6).

We do hope this helps for changing the thumbnails’ opacity on the blog page as you wish. As the code works and this is just an adjustment, we are marking the thread as solved.

Have a nice day!