CSS3-transform缩放

缩放：transform:scale(倍数);

实现hover的时候加载播放图标，具体效果如下：

 首先需要创建一个大盒子，盒子上面部分用一个div来呈放图片，下面部分直接书写文字。观察发现播放图标是存在于上部图片的居中位置，所以可以考虑在上面部分加上after伪元素然后通过定位的方式居中在图片的中间，并且默认情况下这个图标是放大效果，同时是不可见的（设置起不可见可以考虑为display:none或者opacity:0），当整个大div被hover的时候才会缩放到原图也就是transform:scale(1)，并且设置其可见（display:inline-block or opacity:1 ）。代码如下：

     <div class="box">
        <div>
            <img src="../images/bg.jpg" alt="">
        </div>
        <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
    </div>

    .box {
        margin: 100px auto;
        width: 249px;
        height: 210px;
        overflow: hidden;
    }

    .box img {

        width: 100%;
    }

    .box div {
        position: relative;
    }

    .box div::after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        width: 58px;
        height: 58px;
        opacity: 0;
        background-image: url(../images/play.png);
        transform: translate(-50%, -50%) scale(6);
        transition: all .5s;
    }

    .box:hover.box div::after{
        opacity: 1;
        transform:translate(-50%, -50%)  scale(1);
    }