html - 1 つの画像で異なる動作をする 2 つのホバーを表示するにはどうすればよいですか?

Question

私は自分のウェブサイトに画像を持っています。マウスをその上に置くと、左に 105px になります。

.view img {
position: absolute;
z-index: 0;
transition:left 0.5s;
-webkit-transition:left 0.5s; 
}
.view:hover img{
left: -105px;
}

この「ビュー」を水平方向に 2 つのセグメントに分割して、すべてのセグメントが異なるように動作するようにします。画像の 1 つのセグメントにマウスを合わせると、画像が 105px で左に移動し、別のセグメントが別の方向 (右) に移動します。このようなものを書くことを意味します。 :

.view img {
position: absolute;
z-index: 0;
transition:left 0.5s;
-webkit-transition:left 0.5s; 
}
.view:hover 25% right img{
left: -105px;

}
.view:hover 25% left img{
    right: 105px;
}

これどうやってするの？