15

Webサイトのボタンメニューを実行しようとしていますが、マウスホバーでの画像の位置に問題があります。これは私がこれまでに作成したものですhttp://jsfiddle.net/tNLUx/

マウスオーバー時に、選択した画像を拡大し、他の画像を最初の画像と同じ位置に維持したい...下の画像を上に移動するのではなく、上に移動および下に移動するにはどうすればよいですか？

#btnSocial {
  width:100px;
  position: relative;
  opacity: 0.5;
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
}
#btnSocial:hover{
  width: 150px;
  opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
}
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social1" />
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social2"/>
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social3"/>
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social4"/>

4

2 に答える 2

40

transform: scale(x, y)オブジェクトをスケーリングするために使用します。オブジェクトを移動するために
使用します。これらの2つのプロパティを組み合わせることもできます。transform: translate(x, y)
transform: scale(x, y) translate(x, y)

例：

.btn-social {
    width: 100px;
    position: relative;
    opacity: 0.5;
    transition: 0.3s ease;
    cursor: pointer;
}

.btn-social:hover {
    opacity: 1;

    /** default is 1, scale it to 1.5 */
    transform: scale(1.5, 1.5);

    /** translate 50px from left, and 40px from top */
    /** transform: translate(50px, 40px); */

    /** combine both scale and translate */
    /** transform: scale(1.5, 1.5) translate(50px, 40px); */
}
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" /><br />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />

于 2013-02-20T03:23:49.410 に答える
3

これをチェックしてくださいhttp://jsfiddle.net/tNLUx/11/

position: relative;css から削除

#btnSocial{
    width:100px;
    opacity: 0.5;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;

}
于 2013-02-20T04:01:01.273 に答える