css3 переход изображения в неупорядоченном списке — в начало

#css #css-transitions

#css — код #css-переходы

Вопрос:

я хочу использовать неупорядоченный список для отображения нескольких значков подряд..

при наведении курсора мыши (наведении курсора мыши) значки должны увеличиваться, что уже работает нормально, но значки увеличиваются до самого низа.. что мне нужно, так это то, что значки должны расти до самого верха. я предполагаю, что это проблема с позицией: может кто-нибудь помочь с примером 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>
 

Ответ №1:

Вместо этого вы должны использовать масштаб преобразования с исходным значением преобразования, установленным на 100% от позиции y