如题所述
<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>追问
.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>追问
能不能直接追答一下？因为好多东西覆盖住了，看不到
温馨提示：答案为网友推荐，仅供参考
第1个回答 2019-01-03
要想将文字隐藏到图片之下就要先输出文字再输出图片因为程序从上往下执行，然后用定位就可以把图片覆盖到文字上了。但根据图片我觉得你的意思应该是要先隐藏文字，然后鼠标自动到图上的时候文字就显示出来，这个用css就可以完成，要用到伪类hover追问
对的对的，那具体怎么实现啊
对的对的，那具体怎么实现啊
本回答被网友采纳第2个回答 2019-01-03
<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>
* {
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>
* {
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个盒子分开的，反正做法差不多，你应该能看明白的
追问好哒好哒，十分感谢ヾ^_^♪
