0 
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/

画像が間違った方向に膨らみ、隣接する画像が低くなるのはなぜですか? 上に広げてほしいだけです。

前もって感謝します。

4

2 に答える 2

0

vertical-align: top画像に追加するだけです。これにより、上ではなく下に成長します。これは、あなたが望むもののようです（試してみることもできますvertical-align: middle）。

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

于 2013-03-19T22:41:28.523 に答える
0

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

css transform scale と 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 */
}
于 2013-03-19T22:49:16.070 に答える