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>