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

只需将vertical-align: top添加到图片即可。这将使它成长而不是向上，这似乎是你想要的（你也可以尝试vertical-align: middle）。

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

Answer 2

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

css变换比例和变换原点是你正在寻找的

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

#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 */
}

CSS图像过渡废墟内联显示

2 个答案: