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);
    }