WordPress.org

Support

Support » Themes and Templates » [Resolved] Changing opacity of featured images/removing greyscale

[Resolved] Changing opacity of featured images/removing greyscale

  • 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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Andrew Nevins

    @anevins

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

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

    http://www.dishordie.com

    Moderator Andrew Nevins

    @anevins

    Do you have a Custom CSS plugin?

    Sure do.

    Moderator Andrew Nevins

    @anevins

    Double post

    Moderator Andrew Nevins

    @anevins

    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);
    
     }
    
    }

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

    Moderator Andrew Nevins

    @anevins

    For option #1 ?

    Yes, for the greyscale option.

    Moderator Andrew Nevins

    @anevins

    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.

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

    Moderator Andrew Nevins

    @anevins

    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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Resolved] Changing opacity of featured images/removing greyscale’ is closed to new replies.