CSS3 鼠标放在图片上，图片上移

鼠标放在图片上，整块上移，代码如下：

---

html

<ul>
    <li>
        <img src="../img/almost.png" alt="">
        <p>乡镇化</p>
    </li>
    <li>
        <img src="../img/almost.png" alt="">
        <p>城市化</p>
    </li>
    <li>
        <img src="../img/almost.png" alt="">
        <p>全球化</p>
    </li>
</ul>

---

css

ul {
    width: 690px; 
}
ul li {
    width: 210px;
    float: left;
    margin-left: 20px;
    text-align: center; 
}
ul li img {
    width: 102px;         
    height: 102px;
 }
 ul li:hover {            
     transform: translate(0, -15px); 
}