ブートストラップbtn-primaryがホバーに表示される

Question

これは比較的簡単に行うべきだと思いますが、動作させることができません。私はディスプレイフレックスを使って自分のイメージをうまく中心にしたbtnを持っています。ユーザーが画像の上を飛ぶときにbtnを表示し、画像からカーソルを移動すると消えます。微妙なイージー・イン・エフェクトを追加して、スムーズにトランジションするようにしたいと思っています。どんな助けでも大歓迎です。ここに私のCSSとHTMLがあります。

HTML

<div class="row"> 
    <div class="col-md-4"> 
     <div class="imgAbout"> 
     <img src="http://placehold.it/580x410" class="img-responsive" alt="Neil Elmouchi Bio"> 

     <div class="center-container"> 
      <a class="btn btn-sm btn-primary" href="bios/teamBioNeil.html">View More</a> 
     </div> 
     </div> 

     <h1>Name</h1> 
     <h3>Chairman &amp; CEO<br> 
     Senior Wealth Advisor</h3> 
    </div> <!-- end col-md-4 --> 
</div> 

CSS

#about img { 
    margin: 0 auto; 
} 

.imgAbout { 
    position: relative; 
} 

.imgAbout img { 
    display: block; 
    height: auto; 
} 

.center-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

Answer 1

は、あなたのCSSに次の行を追加します。

.imgAbout .center-container .btn { 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s, opacity 0.5s linear; 
} 
.imgAbout:hover > .center-container .btn { 
    visibility:visible; 
    opacity: 1; 
} 

Answer 2

How to make twitter bootstrap menu dropdown on hover rather than click

うまくいけば、これはあなたを助けるでしょう。

jQuery（http://api.jquery.com/fadein/）のfadeInオプションを使用することはできますが、ブートストラップを使用するときに微妙なイージーインアウトを行う方法はわかりません。