html中文字出现效果,css鼠标滑过出现文字效果.html

.box1{

/*定义父级的大小，设置高度为图片高度，便于隐藏文字部分*/

width: 210px;

height: 200px;

background: blue;

position: relative;/*overflow: hidden;隐藏文字部分*/

overflow: hidden;/*隐藏超出的部分，就是隐藏蒙版部分*/

}

.box1_cont{

height: 200px;

height: 200px;

background: palevioletred;

color: #fff;

}

.mb{

/*创建一个蒙版*/

height: 100px;

width: 210px;

background:rgba(255,255,0,0.5);

position: absolute;/*定好蒙版一开始在的位置*/

bottom:-100px;/*距离box1底部的距离为mb自身的高*/

left: 0;

transition: all linear 0.5s;/*设置蒙版的上升动画效果*/

}

.box1:hover .mb{

bottom: 0;/*将蒙版底部位置上移,与父级box1底部对齐*/

}

.box2{

width: 210px;

background: peachpuff;

}

我是父容器里面的div

呵呵你们在飞洒的开发

由于box1设置了overflow，mb没有占用位置

一键复制

编辑

Web IDE

原始数据

按行查看

历史