CSS переходы не работают, как ожидается,

Question

Если вы видите код здесь https://jsfiddle.net/ojagwxc0/ следующий не работает:

.parallax > div .txparallax a { 
    position: absolute; 
    top: 50%; 
    right: 0; 
    margin-top: -49px; 
    display: inline-block; 
    border-radius: 50%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    background: #3498db; 
    width: 126px; 
    height: 126px; 
    line-height: 126px; 
    text-align: center; 
    overflow: hidden; 
    -moz-transition: 0.5s all ease; 
    -o-transition: 0.5s all ease; 
    -webkit-transition: 0.5s all ease; 
    transition: 0.5s all ease; 
} 

Все, что я хочу видеть это любого рода «движения» для слова «Select», «Рыболовные снасти, которые вам нужны» & «Mes cuml dia sed inenias ingerto lot aliiqt dolore ipsum commete».

Что я делаю неправильно? Пожалуйста посоветуй.

Answer 1

Попробуйте Somthing как это. Для перехода на работу вам нужно как-то перемещать его, например, здесь я перемещаю его слева: 0px; налево: 400px по наведению:

https://jsfiddle.net/ojagwxc0/2/

.parallax > div .txparallax { 
    width: 100%; 
    padding-right: 150px; 
    display: inline-block; 
    position: relative; 
    left:0px; 
} 

.parallax > div .txparallax:hover{ 
    left:400px; 
    -moz-transition: 0.5s all ease; 
    -o-transition: 0.5s all ease; 
    -webkit-transition: 0.5s all ease; 
    transition: 0.5s all ease; 
} 

Answer 2

следует добавить действие по наведению напр:

a:hover{ 
    background-color:red; 
} 

рабочий скрипку: https://jsfiddle.net/ojagwxc0/1/