画像の上にメニューを表示させるにはどうしたらいいですか？

Question

私は、私が取り組まれたさまざまなイメージを持つポートフォリオページを作成しています。画像上にマウスカーソルを移動すると、灰色で表示されます（0.4の不透明度で重なっているdivのように）、いくつかのボタン（ソースの表示、デモの表示）が画像上にポップアップ表示されます。

これらの「ポートフォリオ品目」を3つのブートストラップ列に配置したいと考えています。 Zインデックスを使用してホバーまで非表示にするdivを重複して見ていましたが、それをどのように配置するかはわかりませんが、ブートストラップを使用して応答性を保ちます。

これまで私がこれまで持っていたことは次のとおりです。これを行うもっと簡単な方法はありますか？

<div id="portfolio-page"> 
    <div class="row"> 
     <div class="col-lg-4 col-lg-offset-4"> 
      <h2 class="center-text">My Portfolio</h2> 
      <hr> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2" id="portfolio-items"> 
      <div class="row"> 
       <div class="col-lg-4"> 
        <div class="portfolio-item"> 
         <img src="includes/img/headers.jpg" class="img-responsive"></img> 
        </div> 
       </div>    
      </div> 
     </div>   
    </div> 
</div> 

Answer 1

これを行うにはちょっとしたCSSが必要です。

.portfolio_textの不透明度を0に設定しましたが、親の上にマウスを移動すると1に設定されます。.portfolioそれだけで飛び出るとは対照的に、フェードので、私はまた、トランジションを追加しました。

.portfolio { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px 
 
} 
 

 
.portfolio img, 
 
.portfolio_text { 
 
    width: 100%; 
 
    height: 100% 
 
} 
 

 
.portfolio_text { 
 
    position: absolute; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
    color: #fff; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(100, 100, 100, .4); 
 
    opacity: 0; 
 
    transition: opacity .3s cubic-bezier(.25, .8, .25, 1) 
 
} 
 

 
.portfolio:hover .portfolio_text { 
 
    opacity: 1 
 
}

<div class="portfolio"> 
 
    <img src="http://silayexportinc.com/wp-content/uploads/2016/09/placeholder-3.jpg" /> 
 
    <div class="portfolio_text"> 
 
    <span>Look at my Buttons</span> 
 
    <button>Button 1</button> 
 
    <button>Button 2</button> 
 
    <button>Button 3</button> 
 
    </div> 
 
</div>

を