css鼠标滑过出现文字效果

模仿淘宝上鼠标移动到商品图片时，出现的文字效果。

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

posted @ 2017-09-23 23:30  小伍w  阅读(11400)  评论(0)  编辑  收藏  举报