div/imageの背後にあるテキスト

私はちょうど3つの画像の後ろにいくつかのテキストを持ちたいと思っています。これらの3つの画像は、横に並べて表示する必要があります。マウスを動かすと回転し、背景が表示されます。div/imageの背後にあるテキスト

今、私は隣同士にそれらの3つのdiv（ただし、画像の背後にあるテキストを:)）を取得カント問題を抱えている

HTML：

<div id="teamContent"> 
    <div class="teamMember"> 
     <h3>name</h3> 
     <h4>job</h4> 
     <img src="images/team.jpg" alt="teamImage"/> 
    </div> 
    <div class="teamMember"> 
     <h3>name</h3> 
     <h4>job</h4> 
     <img src="images/team.jpg" alt="teamImage"/> 
    </div> 
    <div class="teamMember"> 
     <h3>name</h3> 
     <h4>job</h4> 
     <img src="images/team.jpg" alt="teamImage"/> 
    </div> 
</div>

SCSS：

#teamContent{ 
    display: inline-block; 
    text-align: center; 
    .teamMember{ 
     width: 30%; 
     display: inline-block; 
     position: relative; 
     margin: 20px; 
     img{ 
      max-width: 100%; 
      margin: 0; 
      position: absolute; 
      top: 0; 
      left: 0; 
     } 
    } 
}

フィドルをしようとしました：https://jsfiddle.net/2k2dvhv0/

出典

2017-03-03 Markus G.

の後ろに真ん中にしたい

<div>

を入れ、フレックスが優れている、助けがあります：

は、、単に広告に

<div id="teamContent"> 
    <div class="teamMember"> 
     <img src="https://placehold.it/150x150" alt="teamImage"> 
     <div class="data"> 
      <h3>name</h3> 
      <h4>job</h4> 
     </div> 
    </div> 
    <div class="teamMember"> 
     <img src="https://placehold.it/150x150" alt="teamImage"/>  
     <div class="data"> 
     <h3>name</h3> 
     <h4>job</h4> 
     </div> 
    </div> 
    <div class="teamMember"> 
     <img src="https://placehold.it/150x150" alt="teamImage"/> 
     <div class="data"> 
     <h3>name</h3> 
     <h4>job</h4> 
     </div> 
    </div> 
</div> 

#teamContent { 
    display: flex; 
    justify-content: space-around; 
} 
.teamMember { 
    text-align: center; 
} 
.data { 
    opacity: 0; 
    transition: opacity 0.5s; 
} 
.teamMember:hover .data { 
    opacity: 1; 
} 
.teamMember img { 
    transition: transform 0.5s; 
} 
.teamMember:hover img { 
    transform: rotate(90deg); 
}

https://jsfiddle.net/z9Lh7aqs/

出典

2017-03-03 23:47:42 Paul

おかげで持っていますdはテキストが実際に画像の背後にあり、マウスオーバー時にのみ表示されます –