如何用CSS，将文字隐藏在图片之下，然后将鼠标移到图片上就会浮现出来，下面是图片显示的案例，在线等
3个回答
展开全部
<style>
.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>
追问
能不能直接追答一下？因为好多东西覆盖住了，看不到
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
要想将文字隐藏到图片之下就要先输出文字再输出图片因为程序从上往下执行，然后用定位就可以把图片覆盖到文字上了。但根据图片我觉得你的意思应该是要先隐藏文字，然后鼠标自动到图上的时候文字就显示出来，这个用css就可以完成，要用到伪类hover
追问
对的对的，那具体怎么实现啊
对的对的，那具体怎么实现啊
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
* {
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>
随便写了一个示例，你可以作为参考
更多追问追答
追问
用这个内嵌，然后两个盒子，好的，我回去试一试谢谢啦
追答
<style type="text/css">
* {
padding:0;
margin:0;
height:100%;
}
.imgbox {
position:relative;
width:300px;
height:180px;
background:red;
}
.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:0;
z-index:2;
background:rgba(0, 0, 0, 0.7);
transform:translateY(100%);
bottom:0;
color:#fff;
transition:all 0.5s;
text-align:center;
box-sizing: border-box;
overflow:hidden;
}
.imgbox:hover .imgfont {
height:100%;
}
</style>
</head>
<body>
<div class="imgbox">
<div class="imgbg">这里是图片</div>
<div class="imgfont">这里是文字框</div>
</div>
</body>
哦，做了个修改，现在这个是2个盒子分开的，反正做法差不多，你应该能看明白的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
