safariの隣接セレクタに問題があって一回全部マウスオーバーしないとちゃんと働かない

<img src="images/firefox.png" />
<img src="images/safari.png" />
<img src="images/ie.png" />
<img src="images/firefox.png" />
<img src="images/safari.png" />
<img src="images/ie.png" />
<img src="images/firefox.png" />
<img src="images/safari.png" />
<img src="images/ie.png" />
<img src="images/firefox.png" />

img{
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-transform: scale(1) translate(3px, 0px);
    -webkit-transform-origin: 0 0;
    width:64px;
    height:64px;
}
img:hover{
    -webkit-transform: scale(1.8);
}
img:hover + img{
    -webkit-transform: scale(1.5) translate(2em, 0px);
}
img:hover+img+img{
    -webkit-transform: scale(1.4) translate(2.5em, 0px);
}
img:hover+img+img+img{
    -webkit-transform: scale(1.3) translate(3em, 0px);
}
img:hover+img+img+img+img{
    -webkit-transform: scale(1.2) translate(3em, 0px);
}
img:hover+img+img+img+img+img{
    -webkit-transform: scale(1.1) translate(3em, 0px);
}
img:hover+img+img+img+img+img+img{
    -webkit-transform: scale(1) translate(3em, 0px);
}
img:hover+img+img+img+img+img+img+img{
    -webkit-transform: scale(1) translate(3em, 0px);
}
img:hover+img+img+img+img+img+img+img+img{
    -webkit-transform: scale(1) translate(3em, 0px);
}
img:hover+img+img+img+img+img+img+img+img+img{
    -webkit-transform: scale(1) translate(3em, 0px);
}
img:hover+img+img+img+img+img+img+img+img+img+img{
    -webkit-transform: scale(1) translate(3em, 0px);
}