WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Changing opacity of featured images/removing greyscale (13 posts)

  1. mac88
    Member
    Posted 10 months ago #

    I'm trying to either:

    1. Make the featured image no longer translucent as to make the b&w image actually black and white as opposed to grey and white

    or

    2. Remove the greyscale entirely and just have the featured image have color before mouse over.

    Any advice? Thanks.

  2. Andrew
    Forum Moderator
    Posted 10 months ago #

    1. I'm not sure what you mean black and white instead of gray and white, do you just want it darker?

  3. mac88
    Member
    Posted 10 months ago #

    Yep. The site is going to have photos of food and the light grey makes it look unappealing.

    http://www.dishordie.com

  4. Andrew
    Forum Moderator
    Posted 10 months ago #

    Do you have a Custom CSS plugin?

  5. mac88
    Member
    Posted 10 months ago #

    Sure do.

  6. Andrew
    Forum Moderator
    Posted 10 months ago #

    Double post

  7. Andrew
    Forum Moderator
    Posted 10 months ago #

    Add this CSS to achieve your first option:

    @media screen and (min-width: 800px) {
    
     .blog .hentry a .attachment-post-thumbnail,
     .archive .hentry a .attachment-post-thumbnail,
     .search .hentry a .attachment-post-thumbnail {
    
      /*Play about with the 35%, the lower the number the darker the image*/
    
      -webkit-filter: brightness(35%) grayscale(100%);
      -moz-filter: brightness(35%) grayscale(100%);
      -o-filter: brightness(35%) grayscale(100%);
      -ms-filter: brightness(35%) grayscale(100%);
    
     }
    
    }

    Add this CSS to achieve your second option:

    @media screen and (min-width: 800px) {
    
     .blog .hentry a .attachment-post-thumbnail,
     .archive .hentry a .attachment-post-thumbnail,
     .search .hentry a .attachment-post-thumbnail {
    
      -webkit-filter: grayscale(0);
      -moz-filter: grayscale(0);
      -o-filter: grayscale(0);
      -ms-filter: grayscale(0);
    
     }
    
    }
  8. mac88
    Member
    Posted 10 months ago #

    Thanks so much, this is very helpful! Is there an easy way to turn up contrast?

  9. Andrew
    Forum Moderator
    Posted 10 months ago #

    For option #1 ?

  10. mac88
    Member
    Posted 10 months ago #

    Yes, for the greyscale option.

  11. Andrew
    Forum Moderator
    Posted 10 months ago #

    Add this code instead:

    @media screen and (min-width: 800px) {
    
     .blog .hentry a .attachment-post-thumbnail,
     .archive .hentry a .attachment-post-thumbnail,
     .search .hentry a .attachment-post-thumbnail {
    
      -webkit-filter: brightness(35%) grayscale(100%) contrast(200%);
      -moz-filter: brightness(35%) grayscale(100%) contrast(200%);
      -o-filter: brightness(35%) grayscale(100%) contrast(200%);
      -ms-filter: brightness(35%) grayscale(100%) contrast(200%);
    
     }
    
    }

    I've added 'contrast(200%)', but you can mess about with that percentage.

  12. mac88
    Member
    Posted 10 months ago #

    This is perfect but it's not working in Firefox. Any idea why that might be?

  13. Andrew
    Forum Moderator
    Posted 10 months ago #

    It's a common issue with Firefox and you'll need to apply a SVG file to help http://stackoverflow.com/questions/12173130/css-filter-not-working-in-firefox

    I've never created one of these SVG files before and can't find a CSS generator that will automatically turn your CSS into a Firefox-compatible-SVG file. There might be a generator out there.

    I'm looking for insight from others.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.