CSS Grayscale image cannot get header to be a different colour

Question

I am having issues in setting the colour of my header h2 that is on top of a image that I am setting to grayscale. I want it to be orange but as I have added grayscale it is overriding my css to make the h2 text grey.

My html code is the following:

<div id="thumbnails" class="pt-page  pt-page-current">
            <div class="scalediv">
                <div class="row no-gutter" data-id="one">
                    @for (var i = 0; i < Model.Count; i++)
                    {
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">                            
                                <figure class="callpost" data-num="@Model.Article[i].DataNumber" style="background-image: url('@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(@Model.Article[i].Picture.Image))');" data-property="border-width" data-from="0" data-to="35px">
                                    <div class="content">
                                        <div class="content-wraper">                                            
                                            <h2>@Model.Article[i].Title</h2>                                                                                                                                       
                                            <div class="excerpt">@Model.Article[i].IntroText</div>
                                            <div class="postinfo"> ARTICLES <span>@Convert.ToDateTime(Model.Article[i].DateCreated).ToString("dd/MM/yyyy")</span> </div>
                                        </div>
                                    </div>
                                </figure>                            
                        </div>
                    }                    
                    <div class="clear"></div>
                </div>
            </div>

This is my CSS for the grayscale:

#thumbnails figure {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;      
}
#thumbnails figure:hover {
    -webkit-filter: grayscale(0);
    filter: none !important;    
}

I have tried adding to the css like this:

#thumbnails figure h2{
    color: #DD2C00 !important;
}

This is my CSS for the header:

figure .content  h2 {            
    color: #DD2C00;
    font-family: FuturaBT-Medium;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 47px;
    margin-bottom: 20px;                       
}

Along with other attempts and trying to change the CSS for the h2 but I cannot get the header to display in orange while the image is in gray scale.

Any ideas or pointers would be really appreciated.

Answer 1

Your code does not work, because the filters are calculated after the DOM rendering. Therefore, !important will have no effect.

To disable the filter effect to h2, you need to bring it out. You can visually put h2 on the figure in different ways, such as a negative margin.

Example: https://jsfiddle.net/j9fbc0sw/3/

Sorry for my English)