Post Titles & Featured Images

Posted in: ionMag
Post count: 10

I can see that there’s some fade effect of the background under the images on the front page, that is before adding an image.

Is there a way to fade off the bottom of a featured image, so that it would be easier and clearer to read the post titles over the image?

Thank you!

Simion C.
Post count: 254

Hi,

I believe you are referring to the gradient that some grids display over the image. If you would like to remove it for some elements present on your website, please provide a link to your website where the elements are present. I will try to give you a solution to remove the gradient.

Thanks

Post count: 10

Hi Simion,

Thank you so much.

Yes, I mean the gradient but I don’t want to remove it. Question is, is there a way to add gradient to a featured image on the homepage?

Like the bottom of the top images on the front page here:
https://thenextweb.com/

This would allow for proper display of titles, which wouldn’t blend with the image.

Thank you!

Simion C.
Post count: 254

Hi,

Please provide a link to your website and details about which element or elements you want to have a gradient. I will try to give you a solution with CSS.

Thanks

Post count: 10

Hello Simion and thank you for your willingness to help.

Here is a link to the website:

https://futuretechinsider.com

As you’ll see the first element, top of the homepage, I’m using is Big Grid 1.

Again, I would like to be able to add a black, semi-transparent gradient background to the bottom of the three images, behind the post title.

For reference, you can check out the homepage images of TNW:
https://thenextweb.com/

Please let me know if I need to add more details.

Thank you in advance!

Simion C.
Post count: 254

Hi,

There is a black fade already applied on the big grid modules. You could make it more noticeable and increase the height like this
https://www.screencast.com/t/q3RXQOyZBu
https://www.screencast.com/t/Ga7lRyVzy
You can experiment with this code until you achieve the needed results, or just use it as it is. It can be entered in Theme panel->Custom CSS section.

.td-big-grid-post .td-module-thumb a:last-child:before {
opacity: 0.9;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, #000000 100%);
}

Thanks

Post count: 10

Awesome! Thanks so much!
Exactly what I needed and it works great!
Keep it up!

Viewing 7 posts - 1 through 7 (of 7 total)
You must be logged in to reply to this topic.