css3-鼠标经过产品列表 图片放大 显示文字 （兼容IE9以上 不含IE9）

DOCTYPE HTML>
html>
head>
    meta charset="UTF-8" />
    title>实例: css3技巧——产品列表之鼠标滑过效果title>
    style>
        .main *{
            padding:0;
            margin:0;
            font-family:‘Source Code Pro‘, Menlo, Consolas, Monaco, monospace;
            box-sizing: content-box;
            -webkit-box-sizing: content-box;

        }
        .main {
            position: relative;
            width: 680px;
            margin: 0 auto;
        }
        .view {
            width: 300px;
            margin: 10px;
            float: left;
            border: 10px solid #fff;
            overflow: hidden;
            position: relative;
            text-align: center;
            -webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
            -moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
            box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
            cursor: default;
        }
        .view .mask{
            width: 300px;
            height: 200px;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
        }
        .view img {
            display: block;
            position: relative;
            max-width:100%;
        }
        .view h2 {
            text-transform: uppercase;
            color: #fff;
            text-align: center;
            position: relative;
            font-size: 17px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.8);
            margin: 20px 0 0 0;
        }
        .view p {
            font-size: 12px;
            position: relative;
            color: #fff;
            padding: 10px 20px 20px;
            text-align: left;
        }
        .view .link {
            display: inline-block;
            text-decoration: none;
            padding: 7px 14px;
            background: #000;
            color: #fff;
            text-transform: uppercase;
            -webkit-box-shadow: 0 0 1px #000;
            -moz-box-shadow: 0 0 1px #000;
            box-shadow: 0 0 1px #000;
            font-size: 14px;
        }
        .view .link:hover {
            -webkit-box-shadow: 0 0 5px #000;
            -moz-box-shadow: 0 0 5px #000;
            box-shadow: 0 0 5px #000;
        }

        .view-tenth img {
            -webkit-transform: scaleY(1);
            -moz-transform: scaleY(1);
            -o-transform: scaleY(1);
            -ms-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transition: all 0.7s ease-in-out;
            -moz-transition: all 0.7s ease-in-out;
            -o-transition: all 0.7s ease-in-out;
            -ms-transition: all 0.7s ease-in-out;
            transition: all 0.7s ease-in-out;
        }
        .view-tenth .mask {
            background-color: rgba(249, 179, 255, 0.3);
            -webkit-transition: all 0.5s linear;
            -moz-transition: all 0.5s linear;
            -o-transition: all 0.5s linear;
            -ms-transition: all 0.5s linear;
            transition: all 0.5s linear;
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
        }
        .view-tenth h2 {
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            background: transparent;
            margin: 20px 40px 0px 40px;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            color: #333;
            -webkit-transition: all 0.5s linear;
            -moz-transition: all 0.5s linear;
            -o-transition: all 0.5s linear;
            -ms-transition: all 0.5s linear;
            transition: all 0.5s linear;
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
        }
        .view-tenth p {
            color: #333;
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            -webkit-transition: all 0.5s linear;
            -moz-transition: all 0.5s linear;
            -o-transition: all 0.5s linear;
            -ms-transition: all 0.5s linear;
            transition: all 0.5s linear;
        }
        .view-tenth .link {
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            -webkit-transition: all 0.5s linear;
            -moz-transition: all 0.5s linear;
            -o-transition: all 0.5s linear;
            -ms-transition: all 0.5s linear;
            transition: all 0.5s linear;
        }
        .view-tenth:hover img {
            -webkit-transform: scale(10);
            -moz-transform: scale(10);
            -o-transform: scale(10);
            -ms-transform: scale(10);
            transform: scale(10);
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
        }
        .view-tenth:hover .mask {
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=100);
            opacity: 1;
        }
        .view-tenth:hover h2,
        .view-tenth:hover p,
        .view-tenth:hover .link {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=100);
            opacity: 1;
        }
    style>
head>
body>
div class="main">
    div class="view view-tenth">
        img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/5.jpg" />
        div class="mask">
            h2>Wonder Girlsh2>
            p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...p>
            a href="#" class="link">查看全文a>
        div>
    div>
    div class="view view-tenth">
        img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/3.jpg" />
        div class="mask">
            h2>Wonder Girlsh2>
            p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...p>
            a href="#" class="link">查看全文a>
        div>
    div>
    div class="view view-tenth">
        img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/10.jpg" />
        div class="mask">
            h2>Wonder Girlsh2>
            p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...p>
            a href="#" class="link">查看全文a>
        div>
    div>
    div class="view view-tenth">
        img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/11.jpg" />
        div class="mask">
            h2>Wonder Girlsh2>
            p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...p>
            a href="#" class="link">查看全文a>
        div>
    div>
div>
body>
html>