CSSをフェードインまたはフェードインする方法： "後"のホバー上の擬似要素？

Question

は、マウスのホバー上のすばらしいアイコンのスムーズなフェードを得ることができません。 私は何が間違っていますか？理想的には、アイコンをフェードインさせ、背景画像に不透明度を追加したいと思っています。

フィドル： http://jsfiddle.net/W5e9Q/45/

CODE：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 

.adminDemoVideo { 
    position: relative; 
    display: inline-block; 
    transition: all .5s linear; 
} 
.adminDemoVideo::before { 
    content: '\f04b'; 
    z-index: 5; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    padding: 3px 15px 3px 25px; 
    color: white; 
    font-family: 'FontAwesome'; 
    font-size: 50px !important; 
    background-color: rgba(23, 35, 34, 0.75); 
    border-radius: 5px 5px 5px 5px; 
display:none; 
transition: all .5s linear; 
} 


.adminDemocontainer:hover a::before { 
    display:block; 
    transition: all .5s linear; 
} 

<div class="adminDemocontainer"> 
<a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo"> 
    <img src="http://placehold.it/1200x800/fc0" class="img-responsive"> 
</a> 
</div> 

Answer 1

私は同じCSSを追加している

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
 

 
.adminDemoVideo { 
 
    position: relative; 
 
    display: inline-block; 
 
    transition:all 0.3s ease; 
 
    
 
} 
 
.adminDemoVideo:after { 
 
    content: '\f04b'; 
 
    z-index: 5; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 3px 15px 3px 25px; 
 
    color: white; 
 
    font-family: 'FontAwesome'; 
 
    font-size: 50px !important; 
 
    background-color: rgba(23, 35, 34, 0.75); 
 
    border-radius: 5px 5px 5px 5px; 
 
    -webkit-transition: all 1s; 
 
    transition: all 1s; 
 
    opacity:0; 
 
} 
 

 

 
.adminDemoVideo:hover:after { 
 
    
 
    opacity:1; 
 
}

<div class="adminDemocontainer"> 
 
<a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo"> 
 
    <img src="http://placehold.it/1200x800/fc0" class="img-responsive"> 
 
</a> 
 
</div>

フルあなたの助けをご確認ください。