Textbook Theme – change opacity of featured image

• 

  leonazombie · Member · Aug 9, 2018 at 6:15 pm

  • Copy link
  • Add topic to favorites

  Hi! I am interested in using the Textbook theme for one of my new sites. The problem is I would like the featured image on each post to be at normal opacity, so the picture can be seen clearly, not at the gradient it’s set at by default. Is there any CSS for this please? I’d appreciate your help, many thanks in advance.
  Leona

• 

  catkiinson · Staff · Aug 10, 2018 at 12:00 am

  • Copy link

  Hi,

  Can you please confirm the url of your site?

  Thanks.

• 

  leonazombie · Member · Aug 10, 2018 at 11:21 pm

  • Copy link

  I having created the site yet, I’m hoping to use Textbook when I do. Do you have the CSS code I need? Many thanks.

• 

  wpx2 · Member · Aug 11, 2018 at 12:14 am

  • Copy link

  Hi @leonazombie

  Are you referring to the white gradient on these images? (Look at the picture below)

  

• 

  leonazombie · Member · Aug 11, 2018 at 8:55 pm

  • Copy link

  Hi wpx2, yes that is exactly what I mean. I want the pictures to be clear, normal. Is that possible? Hope so! Thanks :)

• 

  dkmyta · Member · Aug 11, 2018 at 9:38 pm

  • Copy link

  Hey there,

  It looks like you can remove the gradient from the top of the image however the way the image is set up by default it only begins after the text itself ends and doesn’t span the entire container. The text actually has a white background that doesn’t seem to be able to be removed so after removing the gradient overlay you basically end up with this: http://prntscr.com/khihp0.

  Hope this helps,

  Cheers

• 

  wpx2 · Member · Aug 11, 2018 at 9:58 pm

  • Copy link

  Hi @leonazombie

  Yes it is very possible to remove the white gradient from the top of the images. However, the white background of the text will remain, because the text HTML tag is above the image HTML tag. It is as well possible to remove the text background, but the design will look unpleasant to the users.

  Use the following custom CSS codes to remove the white gradient:

  .card .post-thumbnail:before {display: none !important}
  
  .card .entry-title a {
      padding: 12.5px;
  }
  
  .card.has-post-thumbnail .entry-title a {
      padding-bottom: 3px;
  }

  The result will be as you see on the image below:

  

  Let me know if you need more customization codes.

• 

  leonazombie · Member · Aug 12, 2018 at 8:45 pm

  • Copy link

  Many thanks wpx2 and codekymta, I really appreciate your help. I’ll let you know if I need any more advice. Thanks!