Erhellen Bild mit Text mit CSS

Question

Wir verwenden diese 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 Kombination mit diesem 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> 

Sie sehen ein Bild mit Text auf dem Bild zu sehen. Die Maus über Effekte funktioniert, bis Ihr Mauszeiger den Text trifft, dann stoppt der Mouseover-Effekt. Gibt es eine Lösung für dieses 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

Sicher. Fügen Sie pointer-events: none; zum .text-picture CSS hinzu.

Was dies tut ist, lassen Mausereignisse (wie Schweben, Klicken, etc) durchlaufen das Element. Dadurch wird der "schwebende" Zustand des Bildes nicht unterbrochen und bleibt somit hell.

.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

Zeiger Ereignisse keine auf den Text-Bild-Klasse hinzufügen

.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; 
}