我还没有找到这个问题的答案。我有一个带有随 :hover 增长的图像的 div。我想在悬停期间覆盖一些静态的文本,并且不会干扰 anchor 标记。我还需要这种设计具有响应性,以便文本始终位于图像的中间。我已经尝试过 Display:Table 和 Table-cell...我的 CSS 中有些部分与我尝试的所有内容都不一致。
我已经能够将文本放置在绝对 div 中,但我不想指定文本的确切像素位置,因为这不是响应式的。
<style>
#AOB{
height: 700px;
position: relative;
padding: 30px 200px 0px;
}
.innerBlock {
float: left;
display:block;
position: relative;
}
#AOB .innerBlock {
width: 33.2%;
height: 50%;
overflow:hidden;
}
#AOB img{
height:100%;
width: 100%;
}
#AOB img:hover{
-webkit-transform:scale(1.05);
-ms-transform:scale(1.05);
transform:scale(1.05);
transition: all 0.2s ease;
}
.innerBlockText{
position:absolute;
top: 100px;
left: 100px;
z-index:1;
}
</style>
<div id="AOB">
<div id="one" class="innerBlock">
<a href = "http://www.google.com">
<div class="innerBlockText">
beach
</div>
<img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png">
</a>
</div>
<div id="two" class="innerBlock">
<a href = "http://www.google.com">
<img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png">
</a>
</div>
<div id="three" class="innerBlock">
<a href = "http://www.google.com">
<img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png">
</a>
</div>
<div id="four" class="innerBlock">
<a href = "http://www.google.com">
<img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png">
</a>
</div>
<div id="five" class="innerBlock">
<a href = "http://www.google.com">
<img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png">
</a>
</div>
<div id="six" class="innerBlock">
<a href = "http://www.google.com">
<img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png">
</a>
</div>
</div>
谢谢。
最佳答案
添加
.innerBlockText {
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
(当然是把它放在你当前的选择器中)。顶部/左侧 50% mm 将其移动到相对于父级的那些位置; translate 相对于自身移动它,使其居中。
关于html - 响应式设计 : Float text over image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45580207/