How to Customize Blog Post Hover Fade Color?

[verdin_verdin]

Hi, how can I reduce and change the color of the “fade into white on hover” effect on Blog Posts? I would love to customize this effect to suit my website’s colors. Where and how can it be done?
My website - www.verdin.la

[WalkYourStyle]

Are these the blogs you are talking about?

[verdin_verdin]

Hey, no, these ones - https://verdin.la/blogs/verdin-world

[BSSCommerce-HDL]

Hi @verdin_verdin ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

I’m leaving the default red. You can adjust the color yourself.

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[WalkYourStyle]

Instructions

1. Go to ‘Online Store’ → Theme → Edit Code

2. Inside the assets folder locate the file ‘base.css’

3. At the end of the file paste this code

a.t4s-portfolio-thumb::before{
   opacity: 0.5 !important; /* The lower the opacity the more transparent */
}

[ZestardTech]

Hi @verdin_verdin

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.t4s-portfolio-thumb::before {
background: rgba(192, 210, 143, 0.7);
}

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Result:

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

[Sweans]

HI @verdin_verdin ,

If you would like to change the color of the hover effect to better match, You can use some custom CSS to achieve this.

I think along with changing the color of the hover effect, increasing the text size of the hover effect also would be helpful.

You can follow these steps to do that :

Step 1 : Open a css file from the shopify backend
Shopify Backend→ Sales Channel → Online Store→Three buttons near customize button→ Edit Code

Step 2: Add this code to one of these files: theme.css, global.css, theme.css.liquid or theme.liquid

.t4s-portfolio-thumb::before{
background-color:#f5f5dca6;
}

.t4s-portfolio-inner .t4s-post-title {
font-size: 20px;
}

If you are inserting in a .css file then you can directly insert this code, if it is the theme.liquid file make sure to add it to the bottom of the file and enclose it in a style tag as shown in the below screenshot:

You result will look like this :

If you would like a detailed customization, please feel free to contact us and set up a quick call to discuss the changes you would like to indroduct.
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[Dan-From-Ryviu]

Hi @verdin_verdin

You can customize it by changing background color code in this code below, and then add it to Custom CSS in Online Store > Themes > Customize > Theme settings.

.template-blog .t4s-portfolio-thumb::before {
    background: rgba(246, 246, 246, .9);
}