Issue with backdrop-filter - html

Question

Ihave an issue with the backdrop-filter property, because the filter i added in my backdrop-filter do nothing and i don't understand why.
Here is my code :
.army_selection
{
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
background-size: cover;
background-position: center;
transition: 0.1s;
}
.army_selection:hover :nth-child(1)
{
opacity: 1;
-webkit-backdrop-filter: brightness(25%);
transition: 0.1s;
}
<div id="army1" class="army_selection">
<div class="army_selection_bloc">
<p class="army_text">Ultramarines</p>
</div>
</div>

Answer 1

That property is experimental and has limited support.
MDN reference
To use in Chrome v.47 you need to Enable Experimental Web Platform Features.
Consider carefully the limited support; it is possible to achieve the same effect without this specific property. An example workaround.

Answer 2

I think you are trying to accomplish something like this?
Here's a workaround, maybe it's not what you are looking for, hope it helps
.army_selection {
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
background-color: rgba(0,0,0,0);
background-size: cover;
background-position: center;
transition: background-color .2s;
}
.army_selection:hover {
background-color: rgb(0, 0, 0, 0.25);
}
<div id="army1" class="army_selection">
<div class="army_selection_bloc">
<p class="army_text">Ultramarines</p>
</div>
</div>

Answer 3

.army_selection {
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
opacity:-2;
background-color: rgba(0,0,0,0);
background-size: cover;
background-position: center;
transition: background-color .5s;
}
.army_selection:hover {
background-color: rgb(0, 0, 0.8, 0.25);
}
<div id="army1" class="amySelection">
<div class="army_selection_bloc">
<p class="army_text">Ultramarines</p>
</div>
</div>
.armySelection {
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
background-color: rgba(0,0,0,0);
background-size: cover;
background-position: center;
transition: background-color .2s;
}
.armySelection:hover {
background-color: rgb(0, 0, 0, 0.25);
}

Answer 4

I found a solution but it's maybe be not the cleanest one
HTML part :
<div class="army_selection_bloc">
<div id="army1" class="army_selection"></div>
<div class="army_text_bloc">
<p class="army_text">Space marines</p>
</div>
</div>
Css part :
.army_selection_bloc
{
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
}
.army_selection
{
z-index: 2;
position: relative;
top: 0px;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: 0.1s;
}
.army_selection_bloc:hover .army_selection
{
box-shadow: 7px 7px 60px black;
filter: brightness(25%);
transition: 0.1s;
}
.army_selection_bloc:hover .army_text_bloc
{
opacity: 1;
transition: 0.2s;
}
.army_text_bloc
{
z-index: 3;
position: relative;
top: -400px;
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: 0.2s;
}