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％

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

1 个答案: