                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /图片展示特效

这个效果怎么用css来写啊？

叮叮不铛铛

2015-08-20

源自：图片展示特效 2-2

关注问题我要回答

699

操作

收起

1 回答

Leyoz
2015-11-18

用 :hover a { top:0;}就可以了。

例如：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css"  />
    <style type="text/css">
        .time {
            position: relative;
            height: 400px;
            width: 400px;
            background: #ff6600;
            overflow: hidden;
        }
        .time-a {
            position: absolute;
            top: 300px;
            display: inline-block;
            height: 400px;
            width: 400px;
            background: #000;
            opacity: 0.8;
            text-align: center;
        }
        .time:hover .time-a {
            top:0;
        }
    </style>
</head>

<body>
<div class="content3">
    <div class="time">
        <a href="" class="time-a">321654987</a>
    </div>
</div>

</body>
</html>