如何用CSS，将文字隐藏在图片之下，然后将鼠标移到图片上就会浮现出来，下面是图片显示的案例，在线等
发布网友
发布时间：2022-06-03 08:45
共3个回答
热心网友
时间：2023-10-15 07:32
.box {position:relative; float:left; width:240px; height:160px; margin:10px}
.box .img {width:100%; height:100%; background-color:#fdd}
.box .txt {display:none; position:absolute; top:160px; width:320px; height:200px; background-color:#ddf; z-index:2}
.box:hover .txt {display:block}
</style>
<div class="box">
<div class="img">这里放图片</div>
<div class="txt">这里放文字</div>
</div>
<div class="box">
<div class="img">这里放图片</div>
<div class="txt">这里放文字</div>
</div>
<div class="box">
<div class="img">这里放图片</div>
<div class="txt">这里放文字</div>
</div>
<div class="box">
<div class="img">这里放图片</div>
<div class="txt">这里放文字</div>
</div>
<div class="box">
<div class="img">这里放图片</div>
<div class="txt">这里放文字</div>
</div>
<div class="box">
<div class="img">这里放图片</div>
<div class="txt">这里放文字</div>
</div>
<div class="box">
<div class="img">这里放图片</div>
<div class="txt">这里放文字</div>
</div>
<div class="box">
<div class="img">这里放图片</div>
<div class="txt">这里放文字</div>
</div>
追问能不能直接追答一下？因为好多东西覆盖住了，看不到
热心网友
时间：2023-10-15 07:33
对的对的，那具体怎么实现啊
热心网友
时间：2023-10-15 07:33
* {
padding:0;
margin:0;
height:100%;
}
.imgbox {
position:relative;
width:300px;
height:180px;
background:red;
overflow:hidden;
}
.imgbg {
position:absolute;
width:100%;
height:100%;
z-index:1;
color:#fff;
padding-top:20px;
box-sizing: border-box;
}
.imgbox .imgfont {
position:absolute;
width:100%;
height:100%;
z-index:2;
background:rgba(0, 0, 0, 0.7);
transform:translateY(100%);
color:#fff;
transition:all 0.5s;
text-align:center;
padding-top:20px;
box-sizing: border-box;
}
.imgbox:hover .imgfont {
transform:translateY(0%);
}
</style>
</head>
<body>
<div class="imgbox">
<div class="imgbg">这里是图片</div>
<div class="imgfont">这里是文字框</div>
</div>
</body>
随便写了一个示例，你可以作为参考
