悬停/缩放变换背景图像

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