CSS Grayscale image cannot get header to be a different colour
<p>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.</p>

<p>My html code is the following:</p>

<pre><code>&lt;div id="thumbnails" class="pt-page  pt-page-current"&gt;
            &lt;div class="scalediv"&gt;
                &lt;div class="row no-gutter" data-id="one"&gt;
                    @for (var i = 0; i &lt; Model.Count; i++)
                    {
                        &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;                            
                                &lt;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"&gt;
                                    &lt;div class="content"&gt;
                                        &lt;div class="content-wraper"&gt;                                            
                                            &lt;h2&gt;@Model.Article[i].Title&lt;/h2&gt;                                                                                                                                       
                                            &lt;div class="excerpt"&gt;@Model.Article[i].IntroText&lt;/div&gt;
                                            &lt;div class="postinfo"&gt; ARTICLES &lt;span&gt;@Convert.ToDateTime(Model.Article[i].DateCreated).ToString("dd/MM/yyyy")&lt;/span&gt; &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/figure&gt;                            
                        &lt;/div&gt;
                    }                    
                    &lt;div class="clear"&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
</code></pre>

<p></p>

<p>This is my CSS for the grayscale:</p>

<pre><code>#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;    
}
</code></pre>

<p>I have tried adding to the css like this:</p>

<pre><code>#thumbnails figure h2{
    color: #DD2C00 !important;
}
</code></pre>

<p>This is my CSS for the header:</p>

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

<p>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.</p>

<p>Any ideas or pointers would be really appreciated.</p>