La propriété z-index CSS ne fonctionne pas

Question

J'essaie de donner un effet de survol à une div (une image d'arrière-plan) avec la propriété "filter". Mais il a une influence sur un autre div (mon texte) qui est censé être terminé. J'ai appliqué la propriété z-index (sans oublier la position de mes divs) mais cela ne fonctionne pas. Vous verrez, mon texte est flou aussi et n'est pas supposé le faire. Pourriez-vous me dire s'il vous plaît ce qui ne va pas avec mon code?

Voici le codepen montrant mon problème: 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; 
} 

Merci beaucoup!

Answer 1

Lorsque vous ajoutez un effet sur un élément, dans la plupart des cas, leurs enfants peut être affecté de plus, dans ce cas, vous pouvez utiliser un élément pseudo pour les background-image

Updated codepen

Changed règles CSS

.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

Jetez un oeil ici:

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

J'ai pris l'élément de partie de texte de la div d'arrière-plan à être floue, maintenant tous les deux ont le même parent. Ensuite, j'ai résolu le centrage différemment, la façon habituelle (position absolue, haut et gauche 50%, transform: translate(-50%, -50%). Puis j'ai appliqué pointer-events: none; à la couche de texte afin que le vol stationnaire ci-dessous pourrait mot.J'ai ajouté une règle de vol stationnaire différente qui affecte le texte - voir mon codepen HTH