模仿淘宝上鼠标移动到商品图片时，出现的文字效果。
1、效果图
鼠标移动到粉红色的区域，则出现黄色部分。
2、代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/lobal.css"/> <style> .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; } </style> </head> <body> <div class="box1"> <div class="box1_cont">我是父容器里面的div</div> <div class="mb"> <a href=""><span>呵呵你们在飞洒的开发</span></a> </div> </div> <div class="box2"> <span>由于box1设置了overflow，mb没有占用位置</span> </div> </body> </html>
2017-09-23