如何在平移/懸停邊框/框中對齊圖像？

Question

好，所以這個問題有點難以說出，但我會盡可能清楚地解釋這個問題。

我有一個「平移鼠標懸停」效果，我試圖實現。除了鼠標懸停在左邊的圖像以外，一切都是正確的。我希望它從圖像右側開始並向右平移。

只是將margin-left更改爲margin-right周邊不起作用，因爲圖像仍然在421x840框內左對齊。

所以我的問題是，如何將圖像與框內的右對齊，以便當我將鼠標懸停時，它會向右平移-150像素並顯示圖像的左側部分。

我很感激任何幫助提前。謝謝。

HTML代碼：

<div class="sidepan pic"> 
<img src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/19264814292KWf1.jpg" ></img> 
</div> 

CSS代碼：

.pic { 
border: 0px; 
    position: absolute; 
float: left; 
height: 840px; 
width: 421px; 
margin: 0px; 
overflow: hidden; 
} 
.sidepan img { 
margin-left: 0px; 
-webkit-transition: margin 1s ease; 
-moz-transition: margin 1s ease; 
-o-transition: margin 1s ease; 
-ms-transition: margin 1s ease; 
transition: margin 1s ease; 
} 
.sidepan img:hover { 
margin-left: -150px; 
} 

Answer 1

交換利潤率它的伎倆：

.sidepan img { 
    margin-left: -150px; 
} 
.sidepan img:hover { 
    margin-left: 0px; 
} 

小提琴：http://jsfiddle.net/7ava1y31/42/