视屏点击放大效果

作者: c59ffede9db6 | 来源:发表于2017-05-08 11:05 被阅读0次

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .bb{width: 320px;height: 420px;}
        .bb{border:1px solid #fff;}
        .bb:hover{box-shadow: 1px 1px 1px #ccc;}
        .bb .aa{background: red;width: 300px;height: 300px;margin: 10px;overflow: hidden;}
        .bb .aa img{}
        .bb .aa img:hover{
            transform: scale(1.1);
            transform-origin: 50% 50%;
        }
         .bb .aaa{position: relative;display:inline-block;transform: translate(70px,0);}  
    </style>
    <meta charset="utf-8">
</head>
<body>
<div class="bb">
<div class="aa">
    ![](0.jpg)

</div>
<h3>php视屏教学</h3>
<span>主讲人：雄伟</span>
<span class="aaa">播放次数:5000</span>  
</div>

</body>
</html>