WordPress.org

Forums

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

  1. mac88
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year ago #

    Do you have a Custom CSS plugin?

  5. mac88
    Member
    Posted 1 year ago #

    Sure do.

  6. Andrew
    Forum moderator
    Posted 1 year ago #

    Double post

  7. Andrew
    Forum moderator
    Posted 1 year 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 1 year ago #

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

  9. Andrew
    Forum moderator
    Posted 1 year ago #

    For option #1 ?

  10. mac88
    Member
    Posted 1 year ago #

    Yes, for the greyscale option.

  11. Andrew
    Forum moderator
    Posted 1 year 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 1 year ago #

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

  13. Andrew
    Forum moderator
    Posted 1 year 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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.