0

I have two elements: a div with background image and an img (logo) that I need to put in the middle of the first one (vertically aligned). Here's the HTML part:

<div class="srvc_image" style="background: url('img/mainslide_005.jpg') center center no-repeat; background-size: cover;">
    <img src="img/logo_no_text.png" class="logo_srvc">
</div>

And the CSS is as follows:

.srvc_image {
display: inline-block;
border-radius: 100%;
width: 75%;
height: 330px;
vertical-align: middle;

-webkit-filter: brightness(70%);
filter: brightness(70%);
filter:url('../css/filtazz.svg#brightness');
}


img.logo_srvc {
position: absolute;
top: 50%;
left: 40%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
}

I need the logo not inherit the brightness (or whatsoever) from the containing div but can't figure out how to achieve it.

Thanks in advance!

Balabeque
  • 307
  • 3
  • 16
  • I think you can't do it like this. You probably have to put it in a separate div. – smdsgn Feb 29 '16 at 11:26
  • Possible duplicate of [How do I prevent CSS inheritance?](http://stackoverflow.com/questions/958170/how-do-i-prevent-css-inheritance) – Pedram Feb 29 '16 at 11:41
  • 2
    Basically, you can't overide a filter applied to a parent for the children...it's like opacity in that respect - Solution here applies to `filter` as well - http://stackoverflow.com/a/6891319/2802040 – Paulie_D Feb 29 '16 at 16:10

0 Answers0