Q: CSS filter not applying to background image I am encountering a problem and trying to solve it but cant figure it out.
I am trying to apply a filter for a certain color on a div that has a background image, when hovering over another div. Yet it doesnt get applied, nor it applies when I try to do it on the item itself without hover state. I may have missed something but I am not entirely sure what. Its the first time i work with filters in CSS, so it comes a bit new to me.
<div class="background-1">
    <div class="container background-3 container-fix">
        <div class="row-fluid">
            <div id="arts_btn" class="hidden-xs hidden-sm col-md-4 col-lg-4 text-center border-bottom border-bottom-hover-arts">
                 <a href="#" id="arts_logo">
                      Youtopia Arts
                 </a>
            </div>
            <div id="services_btn" class="hidden-xs hidden-sm col-md-4 col-lg-4 text-center border-bottom border-bottom-hover-service">
                 <a href="#" id="service_logo">
                      Yourtopia Services
                 </a>
            </div>
            <div id="fair_btn"class="hidden-xs hidden-sm col-md-4 col-lg-4 text-center border-bottom border-bottom-hover-fair">
                 <a href="#" id="fair_logo">
                      Youtopian Fair
                 </a>
            </div>
        </div>
    </div>
</div>

And the CSS
    .background-1 {
background-color:#fff;
}

.background-2 {
background-color:#f7f8fa;
}

.background-3 {
background-color:#111;
}

#arts_logo {
background-image:url(http://placehold.it/90x90);
background-position:50% 50%;
display:inline-block;
width:100%;
height: 100px;
background-repeat:no-repeat;
text-indent:-9999px;
}

#service_logo {
background-image:url(http://placehold.it/90x90);
background-position:50% 50%;
display:inline-block;
width:100%;
height: 100px;
background-repeat:no-repeat;
text-indent:-9999px;
}

#fair_logo {
background-image:url(http://placehold.it/90x90);
background-position:50% 50%;
display:inline-block;
width:100%;
height: 100px;
background-repeat:no-repeat;
text-indent:-9999px;
}

.border-bottom-hover-arts:hover {
border-bottom: 15px solid;
border-bottom-color: #6f2c31;
}

.border-bottom-hover-service:hover {
border-bottom: 15px solid;
border-bottom-color: #43396d;
}

.border-bottom-hover-fair:hover {
border-bottom: 15px solid;
border-bottom-color: #26645f;
}
.border-bottom{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    padding: 0px;
      border-bottom: 15px solid;
      border-bottom-color: #fff;
}

.container-fix{
  padding: 0px;
}

.border-bottom-hover-arts:hover + #arts_logo{
    filter: hue-rotate(90deg);
    filter: saturate(41);
  -webkit-filter: hue-rotate(356deg) saturate(41);
  -moz-filter: hue-rotate(356deg) saturate(41);
  -o-filter: hue-rotate(356deg) saturate(41);
}

.border-bottom-hover-fair:hover + #fair_logo{
    filter: hue-rotate(90deg);
    filter: saturate(41);
  -webkit-filter: hue-rotate(356deg) saturate(41);
  -moz-filter: hue-rotate(356deg) saturate(41);
  -o-filter: hue-rotate(356deg) saturate(41);
}

.border-bottom-hover-fair:hover + #fair_logo{
    filter: hue-rotate(90deg);
    filter: saturate(41);
  -webkit-filter: hue-rotate(356deg) saturate(41);
  -moz-filter: hue-rotate(356deg) saturate(41);
  -o-filter: hue-rotate(356deg) saturate(41);
}

(sorry for the weird indentation on the css part, but wordpress has a funny way with css files and throwing in extra lines)
I hope you guys can spot my problem, cause I missed it. I have added a link to a codepen as well.
http://codepen.io/anon/pen/QwoWyP
Thanks in advance.

A: You can't apply CSS filters to background images...only actual HTML elements. If you're trying to affect the bg images and not the content another solution is required. 
However, on the assumption you are trying to affect the whole element your selector is wrong.
.border-bottom-hover-arts:hover + #arts_logo{
    filter: hue-rotate(90deg);
    filter: saturate(41);
  -webkit-filter: hue-rotate(356deg) saturate(41);
  -moz-filter: hue-rotate(356deg) saturate(41);
  -o-filter: hue-rotate(356deg) saturate(41);
}

This assumed that #arts_logo is a sibling of .border-bottom-hover-arts when, in fact, it's a child
Your selector should thus be
 .border-bottom-hover-arts:hover #arts_logo

or
 .border-bottom-hover-arts:hover > #arts_logo

Codepen
Useful Article on Selectors
