CSS to Desaturate Background Image Only WIth Other Images in Div Stay Saturated
Saturation works in the same way as opacity does, you can't apply the effect to a parent and then undo it in a child. Your best option would probably be to make the grayscaled image a child of your section but not a parent of the image:
<section>
<figure class="desaturate" style="background-image: url('bg-img-1.jpg');"></figure>
<div class="row">
<div class="col-md-12">
<img src="img-2.jpg" class="img-responsive saturate" alt="" />
</div>
</div>
</section>
Your other option would be to inherit the background in a ::before
or ::after
pseudo element and apply the filter there:
.desaturate {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.desaturate:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
/*grayscale for background image*/
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}
You can see a demo here: http://codepen.io/Godwin/pen/ogLPvR.
Edit: Just for sake of interest, there is another way of doing this but it doesn't have high browser support yet:
.desaturate {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/*grayscale for background image*/
background-color: #FFF;
background-blend-mode: luminosity, normal;
}
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
Example: http://codepen.io/Godwin/pen/raLZVr
Support: http://caniuse.com/#feat=css-backgroundblendmode