CSS Übergang für Opazität funktioniert nicht

Question

Mein Problem ist bereits im Titel angegeben. Ich denke, ich habe alles richtig gemacht. Der Übergangseffekt wird jedoch nicht angezeigt. Beachten Sie, dass der Hover-Effekt tatsächlich angezeigt wird und das Schreiben innerhalb von h5 angezeigt wird, jedoch ohne den Übergangseffekt. Es macht mich verrückt, jeder Rat wird sehr geschätzt werden.

a.jobBoxLink { 
 
    color: #B2B2B2; 
 
    -moz-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
    -webkit-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
    box-shadow: 3px 0 0px 0 #F2F2F2; 
 
} 
 
.jobBoxLink:hover { 
 
    text-decoration: none; 
 
    color: black; 
 
    display: block; 
 
    background #B2B2B2; 
 
} 
 
.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    height: 200px; 
 
    position: absolute; 
 
    width: 200px; 
 
    margin: 0; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 5000ms; 
 
    -moz-transition: opacity 5000ms; 
 
    -o-transition: opacity 5000ms; 
 
    transition: opacity 5000ms; 
 
} 
 
a.jobBoxLink:hover .text-content { 
 
    opacity: 1; 
 
} 
 
.books { 
 
    -moz-box-shadow: 0 0 8px 3px #F2F2F2; 
 
    -webkit-box-shadow: 0 0 8px 3px #F2F2F2; 
 
    box-shadow: 0 0 8px 3px #F2F2F2; 
 
    border-radius: 5px; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
    margin-top: 10px; 
 
    padding-left: -100px; 
 
    alignment-adjust: central; 
 
}

<div class="col-sm-4 col-md-2 BoxCol"> 
 
    <a href="#" class="jobBoxLink "> 
 

 
    <div class="books" style="background-image: url('images/dummy/design.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;"> 
 
     <h5 class="text-content">Place Name</h5> 
 
    </div> 
 
    <!-- Job boxes --> 
 
    </a> 
 
    <div class="caption"> 
 
    <a href="#" class="icon"> <span class="fa fa-thumbs-up fa-lg"></span> &nbsp;</a> 
 
    <span class="greyCaption"> 22</span> 
 
    <a href="#" class="icon"> &nbsp;<span class="fa fa-thumbs-down fa-lg"></span> </a> 
 
    </div> 
 
    <!--like caption --> 
 
</div>

Answer 1

Dies liegt daran, dass Sie CSS auf schweben von Anker Anlegen und standardmäßig <a> ist ein Inline-Element, und wenn Element prüfen Sie sehen, gibt es eigentlich keine Höhe und Breite der <a>. Element und CSS zu blockieren wird funktionieren

a.jobBoxLink { 
 
    color: #B2B2B2; 
 
    display:block; 
 
    -moz-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
    -webkit-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
    box-shadow: 3px 0 0px 0 #F2F2F2; 
 
} 
 
.jobBoxLink:hover { 
 
    text-decoration: none; 
 
    color: black; 
 
    display: block; 
 
    background #B2B2B2; 
 
} 
 
.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    height: 200px; 
 
    position: absolute; 
 
    width: 200px; 
 
    margin: 0; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 5000ms; 
 
    -moz-transition: opacity 5000ms; 
 
    -o-transition: opacity 5000ms; 
 
    transition: opacity 5000ms; 
 
} 
 
a.jobBoxLink:hover .text-content { 
 
    opacity: 1; 
 
} 
 
.books { 
 
    -moz-box-shadow: 0 0 8px 3px #F2F2F2; 
 
    -webkit-box-shadow: 0 0 8px 3px #F2F2F2; 
 
    box-shadow: 0 0 8px 3px #F2F2F2; 
 
    border-radius: 5px; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
    margin-top: 10px; 
 
    padding-left: -100px; 
 
    alignment-adjust: central; 
 
}

<div class="col-sm-4 col-md-2 BoxCol"> 
 
    <a href="#" class="jobBoxLink "> 
 

 
    <div class="books" style="background-image: url('images/dummy/design.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;"> 
 
     <h5 class="text-content">Place Name</h5> 
 
    </div> 
 
    <!-- Job boxes --> 
 
    </a> 
 
    <div class="caption"> 
 
    <a href="#" class="icon"> <span class="fa fa-thumbs-up fa-lg"></span> &nbsp;</a> 
 
    <span class="greyCaption"> 22</span> 
 
    <a href="#" class="icon"> &nbsp;<span class="fa fa-thumbs-down fa-lg"></span> </a> 
 
    </div> 
 
    <!--like caption --> 
 
</div>

Answer 2

verwenden

.text-content:hover{opacity : 1;} 

statt dieses

Verwenden display:block in <a> es zu konvertieren

a.jobBoxLink:hover .text-content{ opacity: 1;} 

a.jobBoxLink{ 
 
color: #B2B2B2; 
 
-moz-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
-webkit-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
    box-shadow:  3px 0 0px 0 #F2F2F2; 
 

 
} 
 
.jobBoxLink:hover{ 
 
text-decoration:none; 
 
color: black; 
 
display:block; 
 
background #B2B2B2; 
 
    } 
 

 

 
    .text-content { 
 
background: rgba(0,0,0,0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    height: 200px; 
 
    position: absolute; 
 
    width: 200px; 
 
     display:block; 
 
    margin:0; 
 
    opacity : 0; 
 
-webkit-transition: opacity 2s; 
 
-moz-transition: opacity 2s; 
 
-o-transition: opacity 2s; 
 
transition: opacity 2s; 
 

 
} 
 

 
.text-content:hover{ 
 
    opacity : 1; 
 
    
 
    } 
 

 

 
.books{ 
 
-moz-box-shadow: 0 0 8px 3px #F2F2F2; 
 
-webkit-box-shadow: 0 0 8px 3px #F2F2F2; 
 
    box-shadow:   0 0 8px 3px #F2F2F2; 
 
border-radius: 5px; 
 
height: 200px; 
 
width: 200px; 
 
margin-bottom:10px; 
 
margin-top: 10px; 
 
padding-left: -100px; 
 
alignment-adjust: central; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="col-sm-4 col-md-2 BoxCol"> 
 
<a href="#" class="jobBoxLink "> 
 

 
<div class="books" style="background-image: url('images/dummy/design.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;"> 
 
     <h5 class="text-content">Place Name</h5> 
 
</div> <!-- Job boxes --> 
 
</a> 
 
<div class="caption"> 
 
<a href="#" class="icon"> <span class="fa fa-thumbs-up fa-lg"></span> &nbsp; </a> 
 
<span class="greyCaption"> 22</span> 
 
    <a href="#" class="icon"> &nbsp;<span class="fa fa-thumbs-down fa-lg"></span> </a> 
 
    </div> <!--like caption --> 
 
    </div> 
 
    </body> 
 
    
 
    </html>