CSS图像过渡会破坏inline didiple

Question

ul, li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px 20px;
}
#footer {
margin: 10px auto 0px auto;
text-align: center;
width: 50%;
clear: both;
}
#footer .social {
margin: 0px auto 0px auto;
padding-top: 60px;
}
#footer img {
border-radius: 5px;
box-shadow: 0 8px 6px -6px black;
align: bottom;
width: 50px;
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
}
#footer img:hover {
width:60px;
}

---

    <div id="footer">
    <div class="social">
        <ul>
            <li><a href="http://facebook.com/dwpirat"><img src="facebook_logo.png"></a></li>
            <li><a href="http://twitter.com/#dwpirat"><img src="twitter_logo.png"></a></li>
        </ul>
    </div>
</div>

http://jsfiddle.net/DvVug/2/

为什么图像在错误的方向上膨胀，导致相邻图像变小?我只是想让它向上扩展

提前感谢。

Answer 1

http://jsfiddle.net/DvVug/4/

css transform scale and transform origin是你要找的

这是最快的解决方案你可以变通，但没有意义希望能有所帮助

#footer img {
border-radius: 5px;
box-shadow: 0 8px 6px -6px black;
align: bottom;
width: 50px;
transition:all 1s;
-moz-transition:all 1s; /* Firefox 4 */
-webkit-transition:all 1s; /* Safari and Chrome */
-o-transition:all 1s; /* Opera */
transform-origin:50% 100%;
-ms-transform-origin:50% 100%; /* IE 9 */
-webkit-transform-origin:50% 100%; /* Safari and Chrome */
-moz-transform-origin:50% 100%; /* Firefox */
-o-transform-origin:50% 100%; /* Opera */
}
#footer img:hover {
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2); /* IE 9 */
-webkit-transform: scale(1.2,1.2); /* Safari and Chrome */
-o-transform: scale(1.2,1.2); /* Opera */
-moz-transform: scale(1.2,1.2); /* Firefox */
}

Answer 2

将vertical-align: top添加到图像中。这将导致它向下生长而不是向上，这似乎是你想要的(你也可以尝试vertical-align: middle)。

http://jsfiddle.net/ExplosionPIlls/DvVug/3/