Легкость в непринужденности на фоновой картинке hover

Question

У меня возникли проблемы с получением фонового изображения, который наводил на вас непринужденность и оказывал влияние на граничную ссылку, и, честно говоря, я даже не знаю, какой из них использовать. Изображение либо движется с переходом, либо ничего не делает. Любая помощь будет большой. Благодаря!

http://codepen.io/anon/pen/ZGewxE

.cta { margin: 0; padding: 1.4em 0 1.4em 0; cursor:pointer; display:block; text-align:center; width:100%; font-size: 2.3em !important; color:#FFF !important; font-weight: 700; font-style: italic; text-transform: uppercase; border: 0; background-image: url(http://i.imgur.com/BaLv0X5.jpg); background-repeat:no-repeat; background-position:center center;} 
.cta:hover { text-decoration:none; border: 0; opacity:0.8; } 
a.cta {border-bottom: none !important; text-decoration: none;} 
.cta span {border: #fff 3px solid; padding: 0.3em;} 
.cta span:hover {background-image: url(http://i.imgur.com/mrbBt4f.jpg); background-repeat:no-repeat; background-position:center center; } 

<a class="cta" href="learn-more" title="Understand your data today!"> 
<p><span>Understand your data today!</span></p> 
</a> 

Answer 1

переходы не работают с фоновыми-изображения к сожалению. Вы можете проверить спецификации css - вы можете делать цвета фона, но не изображения. Вам нужно будет попробовать решение, используя изображения и jquery.

Answer 2

Я думаю, что переходы CSS будут работать.

Добавьте следующий код CSS в классы .cta & пролет .cta

CSS

-webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 

DEMO

Answer 3

@ миа-Sno правильно, вы не можете переход фон-изображения. Если вы хотите внести изменения изображения на парении последовательно я хотел бы изменить:

.cta span:hover 

в

.cta:hover span 

Поскольку нет никаких переходов в вашем codepen я бы @ совет divy3993 и использовать этот CSS , И если вы хотите переместить изображение из размытого в сфокусированное, вам нужно будет перестроить ваш html и получить изображение из фона. Есть несколько способов сделать это, но я надеюсь, что это поможет.