Setting Featured Image Transparency

  • Unknown's avatar
    greenskytec · Member ·

    Hi, can I use CSS to set the transparency for all of the featured images on each page/panel?

    I’m using the shoreditch theme.

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    otpidusprime · Member ·

    Hi there,
    Can you please explain what do you mean by “transparency”?

    If you mean transparency of the entire background image then you can just use the CSS property ‘opacity’. For Eg:
    opacity: 0.5;
    this will set the opacity to 50%.

  • Unknown's avatar
    greenskytec · Member ·

    Thanks otpidusprime. I’m using the shoreditch theme to create a scrolling page with multiple panels. Each “panel” is an individual page with a featured image as the background. I’d like to reduce the opacity of each featured image so the overlaying text stands out more.

    the opacity CSS you have in your post doesn’t seem to change the featured image.

  • Unknown's avatar
    greenskytec · Member ·

    an example of this is in the Pique theme: https://wordpress.com/themes/pique/

    See the example images in the link above.

    I was using this before but changed to shoreditch so I could create multiple a scrolling page site

  • Unknown's avatar
    otpidusprime · Member ·

    By looking at the “Pique theme” i am assuming you want the text to stand out more. What the “Pique theme” has done is overlay a transparent color over the image and not reduce the image opacity.

    You can do the same by using a simple CSS hack, just add the linear gradient option along with you background image, like this:
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://edendrones.files.wordpress.com/2017/01/drone-1245980_1920-e1488563856287.jpg?w=1917&h=1078&crop=1);
    the “linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),” adds a black transparent overlay over the images which makes the text more readable.

    You can adjust the transparency of the overlay by adjusting the last value inside the rgba(0,0,0,0.5). For Eg:
    rgba(0,0,0,0.2)
    will set the transparency to 20%. You can also adjust the transparent overlay color by playing around with the R G B values.

  • Unknown's avatar
    greenskytec · Member ·

    Thanks, that makes sense. However, it doesn’t seem to be working when I copy and paste that code in the CSS customization.

    Also, do I need to include and individual code with custom link for each image I want the overlay?

  • Unknown's avatar
    otpidusprime · Member ·

    Yes, you do need to copy and paste this specific code part:
    linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
    just before the after “background-image: ” and just before “url(‘your_image_link’); “

    You have to do this for every panel containing the image.

    Use this as a reference:
    This is the code for one of your “Home” panel 

    <article id="post-2" class="post-2 page type-page status-publish has-post-thumbnail hentry" style="background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('https://edendrones.files.wordpress.com/2017/01/cropped-drone-1245980_1920.jpg?w=1400&h=837&crop=1');">
  <div class="hentry-wrapper">
    <header class="entry-header">
      <h1 class="entry-title">Home</h1> </header>
    <!-- .entry-header -->

    <div class="entry-content">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <!-- .entry-content -->

  </div>
  <!-- .hentry-wrapper -->
</article>

    Notice the way
    linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
    is used in it.

    Just follow the same pattern for all your panels.

  • Unknown's avatar
    otpidusprime · Member ·

    Also make sure you play around with the opacity value inside rgba(0,0,0,0.5) [0.5 is the opacity value] so that you know it’s working.

  • Unknown's avatar
    greenskytec · Member ·

    Sorry if I’m missing something.. kind of new to CSS. But it doesn’t seem to be working for me. When I change the opacity value, nothing changes. Here is what I have which I would expect to change each image on the home scrolling page

    background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)), url(https://edendrones.files.wordpress.com/2017/01/cropped-drone-1245980_1920.jpg?w=1400&h=837&crop=1)

background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)), url(https://edendrones.files.wordpress.com/2017/01/drone-1132234_19201-e1488564001620.jpg?w=1920&h=1080&crop=1)

background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)), url(https://edendrones.files.wordpress.com/2017/01/cropped-drone-1538957_1920-e1488564041852.jpg?w=1400&h=787&crop=1)

background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)), url(https://edendrones.files.wordpress.com/2017/02/dji_0036-e1488564127830.jpg?w=2000&h=1500&crop=1)
  • Unknown's avatar
    otpidusprime · Member ·

    Try changing the opacity to 0.9, 0.8 or 0.7 see if the background images gets darker.

  • Unknown's avatar
    greenskytec · Member ·

    That doesn’t change anything either.

    It doesn’t seem to be registering or saving on the site at all. For example, when I go to look at CSS revisions, no new code is showing up in my recent revisions even though I’ve saved the above.

    Previous code I’ve used specifically for this theme does show up in my revisions, however.

    Is the code from my previous post invalid in some way?

  • Unknown's avatar
    greenskytec · Member ·

    I swapped out the “()” for “{}” and now the code is saving in the customizer but the “linear-gradient” disappears. For example, this is what remains after exiting and returning to the site.

    background-image: linear-gradient {
}

, url(https://edendrones.files.wordpress.com/2017/01/cropped-drone-1245980_1920.jpg?w=1400&h=837&crop=1);

background-image: linear-gradient {
}

,rgba {
}
}

, url(https://edendrones.files.wordpress.com/2017/01/drone-1132234_19201-e1488564001620.jpg?w=1920&h=1080&crop=1);

background-image: linear-gradient {
}

,rgba {
}
}

, url(https://edendrones.files.wordpress.com/2017/01/cropped-drone-1538957_1920-e1488564041852.jpg?w=1400&h=787&crop=1);

background-image: linear-gradient {
}
  • Unknown's avatar
    otpidusprime · Member ·

    There may be some caching issue(The browser saves the old version of the website shows the same even if we refresh it) i suppose. Make the CSS changes live and preview it in some other browser. Or clear the cache of the current browser that you are using.

    OR

    A better alternative to check if the code is working or not is using the the Chrome Developer Tools which can be accessed by pressing F12 or right-click and choose Inspect Element and make the CSS changes there. It will show you live preview of the changes made. I did the same.

    Please do not replace () with {}. It will give you can error as they are used for totally different purposes in CSS.

  • Unknown's avatar
    otpidusprime · Member ·

    Hi,
    Check out this GIF i made that will help you make the necessary code changes: https://goo.gl/0An8XP

    I am doing this on chrome using the developer tools, which shows me the effect of changes made to the code in real time, and also it’s temporary so make sure you make the changes in the CSS file too, the developer tools just helps us to debug and check whether a code is working or not.

    So use it as a reference. Hope this helps.

  • Unknown's avatar
    greenskytec · Member ·

    Thanks for the GIF. I did the same in the chrome browser and it works, but using the code on my site still doesn’t change anything.

    I think the issue is that this is a wordpress.com site and the CSS Customizer acts differently than if I was using the code for wordpress.org or my own custom site?

    Perhaps the “background image” identifier needs to be specific to the “Shoreditch” theme on wordpress.com

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @greenskytec, add the following to your custom CSS and adjust the last number (0.2) as desired. The more you increase that number the darker your image will become. 

    .page-template-panel-page .hentry.has-post-thumbnail::before {
	background-color: rgba(0, 0, 0, 0.2)
}
  • The topic ‘Setting Featured Image Transparency’ is closed to new replies.