我只想在3張圖片後面有一些文字。 這3幅圖像應該彼此相鄰(連續),當我將它們旋轉時,它們應該旋轉並顯示後面的文本。div/image後面的文字
現在我有我不能讓這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/
謝謝,只需要廣告d文本確實在圖像後面,並且只在鼠標懸停時出現 –