我怎樣纔能有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段，當鼠標移到一個段圖像的再圖像會留在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; 
} 

我怎麼能做到這一點？

Answer 1

你可以使用：前：自CSS3

標記：

<div>hallo JAPAN</div> 

風格：

div{ 
    position:relative; 
    width:100px; 
    height:80px; 
    background-color:#ccc; 
    margin:100px auto; 
} 

div:before,div:after{ 
    content:''; 
    position:absolute; 
    left:0px; 
    top:0px; 
    width:100%; 
    height:100%; 
    opacity:0; 
-webkit-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
transition: all 300ms ease-in-out; 
} 

div:before{ 
    background-color:red; 
    background-image:url(http://www.marcwitteveen.com/wp-content/uploads/2013/01/apple-logo.png); 
    background-repeat:no-repeat; 
    background-position:center; 
} 
div:after{ 
    background-color:red; 
    background-image:url(http://mywindows8themes.com/wp-content/uploads/2011/11/windows_8_metro_logo.png); 
    background-repeat:no-repeat; 
    background-position:center; 
} 
div:hover:before{ 
    left:-100%; 
} 
div:hover:after{ 
    left:100%; 
} 
div:hover:before,div:hover:after{ 
    opacity:1; 
} 

這樣http://jsfiddle.net/nXdMn/