css - ホバー時にアイコンのリストの配置を変更する方法

Question

アイコンのリストを揃えるのに問題があります。

下の写真からわかるように、アイコンのリストがあります。ホバーすると、現在のアイコンが拡大されます。

私がやろうとしているのは、現在のアイコンの拡大方向を変更することです。写真の右側に表示されている方法でリストを整列させたいと思います。

コードは次のとおりです。

HTML code:
<div class="bar">
  <li>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
  </li>
</div>


CSS code:
.bar {
    position: absolute;
    left: 5px;
    width: 35px;
    height: auto
    }

.bar li a img {
    position: relative;
    height: 30px;
    width: 30px;
    padding-top: 4px;
    padding-bottom: 4px
    }

.bar li a:hover img {
    position: relative;
    height: 50px;
    width: 50px
    }

Answer 1

これがあなたが欲しいものですデモ

float:rightimgに使用する必要があります

.bar li a img {
    float: right;
}

divの幅を増やします

.bar {
    width: 50px;
}

Answer 2

bar li a img {
    float: right;
}

トリックを行う必要があります。問題の jsFiddle を作成できますか?

Answer 3

追加:

.bar li a img { 
    right: -20px;
}  
.bar li a:hover img { 
    right: 0;
}