功能2 -- hover出现遮照效果

方法1（jquery）：animate();
方法2（css）：transition;
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title>

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .father {
        overflow: hidden;
        position: relative;
        width: 200px;
        height: 200px;
        background: #fff;
        border: 1px solid #000;
        margin: 0 auto;
    }
    .son {
        position: absolute;
        top: -100%;
        left: 0;
        width: 200px;
        height: 200px;
        background: rgba(0,0,0,.5);
        color: #fff;
    }
</style>
<style type="text/css">
    .father1 {
        overflow: hidden;
        position: relative;
        width: 200px;
        height: 200px;
        background: #fff;
        border: 1px solid #000;
        margin: 0 auto;
    }
    .son1 {
        position: absolute;
        top: -100%;
        left: 0;
        width: 200px;
        height: 200px;
        background: rgba(0,0,0,.5);
        color: #fff;
        transition: top 1s;
    }
    .father1:hover .son1 {
        top: 0%;
    }
    
</style>
</head>

<body>
    <!-- jq方法 -->
    <div class="father">
        I am Father
        <div class="son">I am Son</div>
    </div>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $('.father').mouseover(function () {
            $(this).find('.son').stop()
            $(this).find('.son').animate({'top': '0%'}, 'slow')
        }).mouseout(function() {
            $(this).find('.son').stop()
            $(this).find('.son').animate({'top': '-100%'}, 'slow')
        })
    </script>
    <!-- css方法 -->
    <div class="father1">
        I am Father1
        <div class="son1">I am Son1</div>
    </div>
</html>