无序列表中的 css3 图像转换 - 到顶部

Question

我想用一个无序列表来连续显示一些图标..

在鼠标悬停(悬停)时，图标应该变大，这已经可以正常工作了，但是图标会长到底部。我需要的是:图标应该长到顶部。我想这是一个位置问题:有人可以帮忙提供一个示例 CSS 吗？

html 和 css:

    <div id="container">

<ul>
    <li><img src="test.jpg" /></li>
    <li><img src="test.jpg" /></li>
    <li><img src="test.jpg" /></li>
    <li><img src="test.jpg" /></li>
    <li><img src="test.jpg" /></li>
</ul>


</div> <!-- end of #container -->


<pre>

          ul {
    position: absolute;
  }

li {  
    position: relative;
    bottom: 0;
    left:0;
  }

  ul li {
  float: left;
  }


  ul li img:hover {
    width: 142px;
    height: 142px;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;  
  }

</pre>

Answer 1

您应该改用变换 - 缩放，将变换原点设置在 y 位置的 100%