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

这里解决了https://jsfiddle.net/2k2dvhv0/7/

使用浮动来定位你的div放置

<div>

你想要在另一个<div>

之后的中间

Answer 2

最好的方法是不要使用float，flex更好，有一个帮助：

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

div / image背后的文字

2 个答案: