Impossible d'obtenir un calque CSS pour dépasser le calque "opacifié"

Question

Oui, je sais que ce n'est pas un mot, mais mon cerveau est en surmultiplication en ce moment et c'est presque la fin de ma journée.

Voici le codepen: http://codepen.io/anon/pen/mJKgwd

Le code HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-md-4 col-lg-3 thumb"> 
     <div class="thumbnail-bg"> 
     <a class="thumbnail client-blah1" href="#"> 
      <div class="client-title glyphicon glyphicon-zoom-in"></div> 
      <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah1-ph" class="img-responsive"></svg> 
     </a> 
     </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-lg-3 thumb"> 
     <div class="thumbnail-bg"> 
     <a class="thumbnail client-blah1" href="#"> 
      <div class="client-title glyphicon glyphicon-zoom-in"></div> 
      <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah2-ph" class="img-responsive"></svg> 
     </a> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-lg-3 thumb"> 
     <div class="thumbnail-bg"> 
     <a class="thumbnail client-blah1" href="#"> 
      <div class="client-title glyphicon glyphicon-zoom-in"></div> 
      <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah3-ph" class="img-responsive"></svg> 
     </a> 
     </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-lg-3 thumb"> 
     <div class="thumbnail-bg"> 
     <a class="thumbnail client-blah1" href="#"> 
      <div class="client-title glyphicon glyphicon-zoom-in"></div> 
      <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah4-ph" class="img-responsive"></svg> 
     </a> 
     </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-lg-3 thumb"> 
     <div class="thumbnail-bg"> 
     <a class="thumbnail client-blah1" href="#"> 
      <div class="client-title glyphicon glyphicon-zoom-in"></div> 
      <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah5-ph" class="img-responsive"></svg> 
     </a> 
     </div> 
    </div> 
    </div> 
</div> 

Le CSS:

.thumb { 
    transform: translateZ(0); 
    margin-bottom: 30px; 
    position: relative; 
} 
.thumbnail-bg { 
    background-color: rgba(34, 34, 34, 1.0); 
} 
.thumbnail { 
    border-radius: 0; 
    border: 0 !important; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    width: 100%; 
    max-height: 300px; 
    overflow: hidden; 
    transition: opacity 1s ease; 
} 
.thumbnail:hover { 
    opacity: 0.2; 
} 
.thumbnail:hover .client-title { 
    display: block; 
} 
.client-title { 
    width: 100%; 
    text-align: center; 
    font-size: 5em; 
    text-shadow: 1px 1px 0 rgb(34, 34, 34), 0 0 0 rgb(34, 34, 34), 1px 1px 8px rgb(34, 34, 34); 
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    color: rgb(231, 231, 231); 
    transform: translateY(-50%); 
} 

@media screen and (min-width: 992px) { 
    .thumbnail { 
    max-height: 200px; 
    } 
} 

.client-blah1 { background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97300&w=300&h=300'); } 

Tout fonctionne, sauf pour obtenir le glyphicon superposé pour voir "ci-dessus" la couche d'opacité sur flotter. J'ai essayé un certain nombre de choses différentes, y compris jouer avec z-index, déplaçant physiquement l'élément div autour du code (c'est-à-dire en dehors de l'élément enfant étant réglé sur une faible opacité pour permettre à la couleur BG de passer) . Je ne sais pas trop où aller avec ceci, le code est un extrait directement du code du site, donc je sais qu'il n'y a pas d'autres problèmes environnementaux dans le code parce que la même chose se passe dans le codepen .

Je suis sûr que c'est quelque chose de simple et de basique que je néglige mais je suppose que je ne peux pas voir la forêt des arbres, comme ils disent.

Toute aide serait grandement appréciée, merci d'avance. PS Je ne veux pas simplement utiliser par défaut une solution basée sur jQuery, le CSS y est déjà à 99,9%.

Answer 1

Vous devez utiliser la couleur d'arrière-plan avec rgba dans la classe des vignettes. De sorte que le CSS ne change que l'opacité/alpha de l'arrière-plan et non le récipient entier comme le fait l'opacité.

.thumb { 
    transform: translateZ(0); 
    margin-bottom: 30px; 
    position: relative; 
} 
.thumbnail-bg { 
    background-color: rgba(34, 34, 34, 1.0); 
} 
.thumbnail { 
    border-radius: 0; 
    border: 0 !important; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    width: 100%; 
    max-height: 300px; 
    overflow: hidden; 
    transition: background-color 1s ease; 
} 
.thumbnail:hover { 
    background-color: rgba(99,99,99, 0.2) 
} 
.thumbnail:hover .client-title { 
    display: block; 
} 
.client-title { 
    width: 100%; 
    text-align: center; 
    font-size: 5em; 
    text-shadow: 1px 1px 0 rgb(34, 34, 34), 0 0 0 rgb(34, 34, 34), 1px 1px 8px rgb(34, 34, 34); 
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    color: rgb(231, 231, 231); 
    transform: translateY(-50%); 
} 

@media screen and (min-width: 992px) { 
    .thumbnail { 
    max-height: 200px; 
    } 
} 

.client-blah1 { background-color: rgba(99,99,99,1) } 

Answer 2

Voici une solution rapide. Jouez avec un peu:

.thumbnail { 
    border-radius: 0; 
    border: 0 !important; 
    color: #ddd; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    width: 100%; 
    max-height: 300px; 
    overflow: hidden; 
} 
.thumbnail:hover { 
    -webkit-box-shadow: inset 0 0 1000px rgba(0,0,0,0.5); 
     -moz-box-shadow: inset 0 0 1000px rgba(0,0,0,0.5); 
      box-shadow: inset 0 0 1000px rgba(0,0,0,0.5); 
} 

Remplacez votre .thumbnail et .thumbnail:hover CSS avec ce qui précède et de voir ce qui se passe.

Votre élément de zoom avant glyphique reste blanc, ce qui est idéal.

Answer 3

Il s'avère que j'allais juste à partir de la mauvaise direction.

Mise à jour Codepen: http://codepen.io/anon/pen/gpKJoG

fin