我只想在 3 个图像后面添加一些文字。这 3 个图像应该彼此相邻(连续),当我悬停它们时,它们应该旋转并出现后面的文本。
现在我遇到的问题是我无法将这 3 个 div 放在一起(但是图像后面的文字:))
网址:
<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/
最好的方法是不要使用浮动,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);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句