div/image後面的文字

Question

我只想在3張圖片後面有一些文字。 這3幅圖像應該彼此相鄰（連續），當我將它們旋轉時，它們應該旋轉並顯示後面的文本。

現在我有我不能讓這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/

Answer 1

最好的辦法是不使用浮動中間希望

<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/

Answer 2

這裏解決了https://jsfiddle.net/2k2dvhv0/7/

使用浮動來定位你的div把你身後的那些<div>