Search code examples
csshoverscale

Hover/scale transform background image

I have used the code below to create a row of image holders which can be either portrait or landscape. I can't work out how to now apply a hover scale transform to each image (larger). Here is the code:

    <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>
Solution 
  • li div:hover{
    transform:scale(1.1,1.1);
}