Apply and Remove Grayscale Images

With Themeco's Pro Theme

Used to apply and/or remove the grayscale effect for background images in the X Pro theme. In this snippet we are targeting both the NAV (.x-masthead .x-bg) and the CLASS or ID (.mast):

Convert to Grayscale:

/*Convert nav and mast into grayscale*/

.x-masthead .x-bg, .mast .x-bg {
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}

Convert Back Into Color:

/*Convert nav and mast back into color*/

.x-masthead .x-bg, .mast .x-bg {
    -webkit-filter: grayscale(0%); 
    filter: grayscale(0%);
}

Courtesy of Steve Lawrence

sdlawrence.com

X Pro Theme Elements

Convert nav and mast into grayscale

Convert nav and mast back into color