Brighten image with text using CSS - html

Question

We using this css
.event_box > a img{
width: 100%;
filter: brightness(70%);
display: block;
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
-ms-transition: all 0.7s linear;
-o-transition: all 0.7s linear;
transition: all 0.7s linear;
}
.event_box >a:hover img:hover{
filter:brightness(100%)
}
.event_box .text-picture
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: #fff;
height: 0;
text-align: center;
font-family: Open Sans Semibold;
font-size: 26px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
z-index: 999;
}
in combination with this html:
<div class="row">
<div class="event_box">
<a href="'.$templink.$langlink.$paginalink.'portfolio'.$caselink.'1000-wishes">
<img src="'.$url.'images/home/1000-wishes.jpg" alt="1000 Wishes"/>
<div class="text-picture">
1000 Wishes
</div>
</a>
</div>
</div>
You will see a picture with text on of the picture.
The mouse over effects works till your mousepointer hits the text, then the mouse over effect stops.
Is there a sollution for this problem?
.event_box > a img{
width: 100%;
filter: brightness(70%);
display: block;
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
-ms-transition: all 0.7s linear;
-o-transition: all 0.7s linear;
transition: all 0.7s linear;
}
.event_box >a:hover img:hover{
filter:brightness(100%)
}
.event_box .text-picture
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: #fff;
height: 0;
text-align: center;
font-family: Open Sans Semibold;
font-size: 26px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
z-index: 999;
}
<div class="row">
<div class="event_box">
<a href="http://www.jcsl.nl/clean/images/home/1000-wishes.jpg">
<img src="http://www.jcsl.nl/clean/images/home/1000-wishes.jpg" alt="1000 Wishes">
<div class="text-picture">
1000 Wishes
</div>
</a>
</div>
</div>

Answer 1

Sure. Add pointer-events: none; to the .text-picture CSS.
What this does is let mouse events (like hovering, clicking, etc) pass through the element. By doing this, the image's "hovered" state won't be interrupted, and thus it will stay bright.
.event_box > a img{
width: 100%;
filter: brightness(70%);
display: block;
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
-ms-transition: all 0.7s linear;
-o-transition: all 0.7s linear;
transition: all 0.7s linear;
}
.event_box >a:hover img:hover{
filter:brightness(100%)
}
.event_box .text-picture
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: #fff;
height: 0;
text-align: center;
font-family: Open Sans Semibold;
font-size: 26px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
z-index: 999;
pointer-events: none;
}
<div class="row">
<div class="event_box">
<a href="http://www.jcsl.nl/clean/images/home/1000-wishes.jpg">
<img src="http://www.jcsl.nl/clean/images/home/1000-wishes.jpg" alt="1000 Wishes">
<div class="text-picture">
1000 Wishes
</div>
</a>
</div>
</div>

Answer 2

Add pointer events none to the text-picture class
.event_box .text-picture
{
//this line
pointer-events:none;
----
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: #fff;
height: 0;
text-align: center;
font-family: Open Sans Semibold;
font-size: 26px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
z-index: 0;
}