css - 悬停/缩放变换背景图像

Question

我使用下面的代码创建了一排图像持有者，可以是纵向的也可以是横向的。我不知道现在如何对每个图像(更大)应用悬停缩放变换。这是代码:

    <ul>
    <li>
        <div style="width:150px; height:150px;
           background: url('img/2.png') no-repeat center;
           border:1px solid red;">
        </div>
    </li>


    <li>
        <div style="width:150px; height:150px;
           background: url('img/1.png') no-repeat center;
           border:1px solid red;">
        </div>
    </li>

    <li>
        <div style="width:150px; height:150px;
           background: url('img/3.png') no-repeat center;
           border:1px solid red;">
        </div>
    </li>
</ul>

Answer 1

li div:hover{
    transform:scale(1.1,1.1);
}