gpt4 book ai didi

html - div/图像后面的文字

转载 作者:行者123 更新时间:2023-11-28 04:13:40 25 4
gpt4 key购买 nike

我只想在 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;
}
}
}

试着做一个 fiddle :https://jsfiddle.net/2k2dvhv0/

最佳答案

最好的办法就是不要用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/

关于html - div/图像后面的文字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42589986/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com