Coolen Coolen -4 years ago 130
CSS Question

Brighten image with text using CSS

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download