CSS-Stile nicht für bestimmte Klasse

Question

Meine css/main.css Datei ist mit meiner index.html Datei korrekt verknüpft und alle CSS-Code im Inneren funktioniert mit allen meinen HTML-Elementen.

Ich versuche jedoch, ein Bild zu bekommen, das Informationen anzeigt, wenn es sich über nichts bewegt - das CSS wird nicht erkannt, ich denke, es gibt ein Problem mit den Klassen.

.box { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.box:before { 
 
    content: ""; 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(177, 208, 113, 0.8); 
 
    opacity: 0; 
 
    transition: all 300ms ease-in-out 0s; 
 
} 
 

 
.box:hover:before { 
 
    opacity: 1; 
 
}

<div class="container margintop-50"> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <div class="box"> 
 
     <img src="img/secgen.jpg" class="img-responsive img-circle"> 
 
     <div class="boxContent"> 
 
      <h3 class="title">Sivan Chakravarty</h3> 
 
      <span class="post">Secretary General</span> 
 
      <ul class="links"> 
 
      <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
 
      <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Edit: Es scheint perfekt, hier zu arbeiten. Ich benutze Sublime Text, alles ist richtig eingestellt; aber das funktioniert einfach nicht in meinem Browser. Keine Fehler in der Konsole, nichts.

Answer 1

überprüfte ich your fiddle und fand ein sehr seltsames Problem darin: alle space Zeichen in Ihrem CSS sind eigentlich nicht SPACE char aber char Code die visuell wie als Raum ist, sondern von Browsern erkannt dosen't!

all derer, die in einem Texteditor wie Notepad ersetzen ++ Sie werden sehen, es wie im Code-Schnipsel funktioniert!

Sie können aber auch Here.

.box{ 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.box:before{ 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(177, 208, 113, 0.8); 
 
    opacity: 0; 
 
    transition: all 300ms ease-in-out 0s; 
 
} 
 
.box:hover:before{ 
 
    opacity: 1; 
 
} 
 

 
.box .boxContent{ 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: #fff; 
 
    z-index: 1; 
 
} 
 
.box .title{ 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    top: 18%; 
 
    transform: scale(5); 
 
    opacity: 0; 
 
    transition: all 0.3s ease-in-out 0.1s; 
 
} 
 
.box .post{ 
 
    display: block; 
 
    font-size: 16px; 
 
    font-style: italic; 
 
    position: relative; 
 
    top: 18%; 
 
    transform: scale(5); 
 
    opacity: 0; 
 
    transition: all 0.3s ease-in-out 0.2s; 
 
} 
 
.box:hover .title, 
 
.box:hover .post{ 
 
    opacity: 1; 
 
    transform: scale(1); 
 
} 
 
.box .links{ 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    top: 23%; 
 
    transform: scale(5); 
 
    opacity: 0; 
 
    transition: all 0.3s ease-in-out 0.1s; 
 
} 
 
.box:hover .links{ 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    transition-delay: 0.3s; 
 
} 
 
.box .links li{ 
 
    display: inline-block; 
 
    margin-right: 20px; 
 
} 
 
.box .links li:last-child{ 
 
    margin-right: 0; 
 
} 
 
.box .links li a{ 
 
    display: block; 
 
    width: 60px; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    border-radius: 50%; 
 
    font-size: 20px; 
 
    color: #fff; 
 
    border: 1px solid #fff; 
 
}

<div class="container margintop-50"> 
 
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <div class="box"> 
 
     <img src="img/secgen.jpg" class="img-responsive img-circle" style="height:250px"> 
 
     <div class="boxContent"> 
 
     <h3 class="title">Sivan Chakravarty</h3> 
 
      <span class="post">Secretary General</span> 
 
       <ul class="links"> 
 
       <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
 
       <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
 
       </ul> 
 
     </div>   
 
     </div> 
 
     </div>                       
 
    </div> 
 
    </div>

Answer 2

schweben Arbeitsprüfung hier aktualisiert Geige siehe ..... https://jsfiddle.net/cL361fb0/

.box { 
    overflow: hidden; 
    position: relative; 
} 

.box:before { 
    content: ""; 
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: rgba(177, 208, 113, 0.8); 
    opacity: 0; 
    transition: all 300ms ease-in-out 0s; 
} 

.box:hover:before { 
    opacity: 1; 
}