CSS-Z-Index-Eigenschaft funktioniert nicht

Question

Ich versuche, ein div (ein Hintergrundbild) mit der "Filter" -Eigenschaft einen Hover-Effekt zu geben. Aber es hat einen Einfluss auf ein anderes Div (mein Text), das vorbei sein soll. Ich habe die Z-Index-Eigenschaft angewendet (ohne die Position meiner Divs zu vergessen), aber es funktioniert nicht. Du wirst sehen, mein Text verschwimmt auch und soll nicht. Können Sie mir bitte sagen, was mit meinem Code nicht stimmt?

Hier ist die codepen zeigt mein Problem: https://codepen.io/Gillian-D/pen/qmqEQy

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6 left_part-padding"> 
     <div class="left_part"> 
      <div class="left_part_content"> 
      Left part 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.container { 
    margin-right: auto; 
    margin-left: auto; 
} 


.left_part { 
    height: 40vh; 
    position: relative; 
    z-index: 0; 
    background-image: url(img/book2.jpeg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-color: #000; 
    box-shadow: 0 50px 60px 0 rgba(0,0,0,.35); 
    border-radius: 10px; 
} 


.left_part:hover { 
-webkit-filter: blur(5px); 
filter: blur(5px); 
-webkit-transition: .5s ease-in-out; 
position: relative; 
z-index:0; 
} 

.left_part_content:hover { 
color: #fed136; 
position: relative; 
z-index: 2; 
} 

.left_part-padding, .right_part-padding, .bottom_part-padding { 
padding-left: 10px; 
padding-right: 10px; 
} 

.left_part_content { 
    color: white; 
    font-family: "Raleway", Helvetica, Arial, sans-serif; 
    text-transform: uppercase; 
    font-size: 1.2rem; 
    font-weight: 400; 
    letter-spacing: .300em; 
    margin-right: -.300em; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 40vh; 
    position: relative; 
    z-index: 2; 
} 

Vielen Dank!

Answer 1

Wenn Sie einen Effekt auf ein Element hinzufügen, wird in den meisten Fällen ihre Kinder ebenfalls betroffen, so dass in diesem Fall, Sie ein Pseudoelement für die background-image

Updated codepen

Geänderte CSS-Regeln verwenden könnte

.left_part { 
    height: 40vh; 
    position: relative; 
    background-color: #000; 
    box-shadow: 0 50px 60px 0 rgba(0,0,0,.35); 
    border-radius: 10px; 
} 

.left_part::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url(http://lorempixel.com/500/200/nature/1/); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-color: #000; 
    border-radius: 10px; 
} 

.left_part:hover::before { 
    -webkit-filter: blur(5px); 
    filter: blur(5px); 
} 

Answer 2

Werfen Sie einen Blick hier:

https://codepen.io/anon/pen/EmNPVZ

Ich nahm das Textteilelement aus dem zu verwischenden Hintergrund div, jetzt haben beide das gleiche Elternteil. Als nächstes löste ich die Zentrierung anders, den üblichen Weg (absolute Position, oben und links 50%, transform: translate(-50%, -50%). Ich wandte dann pointer-events: none; auf die Textebene, so dass der Mauszeiger darunter Wort. Und ich fügte eine andere Hover-Regel, die den Text betrifft) siehe meine Codepen HTH