Readmore箭頭 - 懸停效果 - 幻燈片文本

Question

我有一個底部有箭頭的容器。懸停我希望這樣的箭頭動畫向右當readmore（閱讀更多）文本幻燈片

狀態1：http://postimg.org/image/5ovuxrfdd/ （readmore文本是不可見的，溢出：隱藏）

狀態2：http://postimg.org/image/y5imixrbd/

我已經有一些CSS動畫工作，但我使用transform屬性上的固定像素。我也希望這個工作是響應式的。所以我需要一個更動態的方法。

我希望我能解決這個沒有JS。

Answer 1

.button { 
display: block; 
position: relative; 
width: 200px; 
height: 200px; 
background: red; 
text-decoration: none; 
overflow: hidden; 
cursor: pointer; 
} 

.button:hover .readmore { 
    transform: translate(0,0); 
    margin-left: 0; 
} 

.readmore { 
    position: absolute; 
    left: 20px; 
    bottom: 20px; 
    transform: translate(-100%, 0); 
    margin-left: -20px; 
    transition: all 300ms ease-out; 
} 

.arrow { 
    display: block; 
    width: 20px; 
    height: 20px; 
    background: green; 
    position: absolute; 
    left: 100%; 
    margin-left: 20px; 
    top: -2px; 
} 

http://jsfiddle.net/nkfv9n6y/3/