Brightness tylko dla obrazka w tle, tekst na wierzchu bez zmian

Witam wszystkich,
na wstępie wrzucam screen z moim problemem:

Div ma ustawione tło z obrazkiem, który na starcie ma mieć brightness 0.4, a przy pseudo-klasie :hover brightness powinno zmienić się na 1. Na środku diva widnieje tekst, który powinien mieć **zawsze **brightness równe 1. Aktualnie brightness tekstu zmienia się tak jak diva, kod wygląda następująco:

<div class="large-4 medium-4 small-4 columns">
	<div id="branze_1">
		<p class="branze">EDUKACJA</p>
	</div>
</div>
<div class="large-4 medium-4 small-4 columns">
	<div id="branze_2">
		<p class="branze">TRANSPORT & LOGISTYKA</p>
	 </div>
</div>
<div class="large-4 medium-4 small-4 columns">
	<div id="branze_3">
		<p class="branze">PRODUKCJA</p>
	</div>
</div>

#branze_1, #branze_2, #branze_3 {
    display: block;
    height: 115px;
    width: 91px;
    background: url("../images/branze_1.jpg");
    z-index: 9;
    margin: 2.5px auto;
    -webkit-filter: brightness(0.4);
    -moz-filter: brightness(0.4);
    -o-filter: brightness(0.4);
    -ms-filter: brightness(0.4);
    filter: brightness(0.4); }
}
#branze_1:hover, #branze_2:hover, #branze_3:hover {
  -webkit-filter: brightness(1);
  -moz-filter: brightness(1);
  -o-filter: brightness(1);
  -ms-filter: brightness(1);
  filter: brightness(1);
}
p.branze {
    position: absolute;
    z-index: 9999;
    top: 45%;
    color: #fff;
    text-align: center;
    width: 100%;
    font-size: 11.5px;
    font-weight: 400;
    font-family: OpenSans-Regular;
    -webkit-filter: brightness(1);
    -moz-filter: brightness(1);
    -o-filter: brightness(1);
    -ms-filter: brightness(1);
    filter: brightness(1); 
}
 

Próbowałem różnych rozwiązań m.in. znacznik

ustawiłem w htmlu pod divem z obrazkiem, wówczas co prawda tekst ma na stałe żądaną wartość brightness, ale :hover dla diva w tle nie działa gdy kursor znajduje się dokładnie na tekście.

Będę wdzięczny za każdą pomoc,
pozdrawiam.

Możesz użyć w tym celu JS czy na czystym CSSie musisz to zrobić?

Mogę użyć js

Próbowałem różnych rozwiązań m.in. znacznik

ustawiłem w htmlu pod divem z obrazkiem, wówczas co prawda tekst ma na stałe żądaną wartość brightness, ale :hover dla diva w tle nie działa gdy kursor znajduje się dokładnie na tekście.

--tekst--

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".text").on('mouseover', brightup);
            $(".text").on('mouseout', brightdown);
        });

        function brightup() {
            $(this).prev().addClass('bright');
        }

        function brightdown() {
            $(this).prev().removeClass('bright');
        }
    </script>

.bright {
    -webkit-filter: brightness(1);
    -moz-filter: brightness(1);
    -o-filter: brightness(1);
    -ms-filter: brightness(1);
    filter: brightness(1);
}

Niestety to jeszcze nie jest rozwiązaniem. Wydaje mi się, że skrypt powinien wyglądać tak, by po najechaniu na ".text" nadać klasę ".bright" divowi, a nie tekstowi, ale nie wiem jak to zapisać.

To jest jquery, tzw. DOM traversal - skrypcik nadaje klasę .bright poprzedniemu 'siblingowi' :)

w takim układzie:

<div id="parent">
    <div class="sibling"></div>
    <div class="sibling"></div>
</div>

Te dwa divy o klasie sibling jak sama nazwa mówi są rodzeństwem i mają swojego rodzica, funkcja prev() biblioteki jQuery odwołuje się do elementu, który jest jego rodzeństwem i występuje w kodzie przed nim
jeśli chcesz się odwołać do następnego to masz .next() a do rodzica .parent()

więc jeśli wszystko masz ok to moje rozwiązanie działa

Sęk w tym, że nie działa :) Nadal po najechaniu na obrazek rozjaśnia się, ale gdy kursor jest w miejscu gdzie tekst obrazek "gaśnie".

Wklej kod tutaj

edit:
zgaduję, że masz tak:

<div class="large-4 medium-4 small-4 columns">
    <div id="branze_1">
        <p class="branze">EDUKACJA</p>
    </div>
</div>

a kod zakłada coś takiego

<div class="large-4 medium-4 small-4 columns">
    <div id="branze_1">
        <img src="">
    </div>
    <p class="text">EDUKACJA</p>
</div>

Ok, już mam. Trzeba było dodać "!important" w klasie .bright. Dzięki wielkie za pomoc!