CSS Background Transition & Responsive (fade)

Question

Участник этого форума был достаточно любезен, чтобы предоставить следующий код опрокидывания CSS, который является «текучим» и может регулироваться в размерах на основе размера браузера. Я включил код ниже вместе с Jfiddle ссылка:

CSS

.container { 
    width: 100%; 
    height: 300px; 
    background: #f1f1f1; 
} 
a.widgetbook { 
    display:block; 
    max-width: 369px; 
    max-height: 85px; 
    width: 100%; 
    height: 100%; 
    background: url("http://69.195.124.70/~profetz4/wp-content/themes/artificer/images/btn-contact.jpg") no-repeat left top; 
    margin-bottom: 6px; 
    background-size: 200%; 
} 
a.widgetbook:hover { 
    background-position: right top; 
} 

HTML

<div class="container"> 
<a href="#" class="widgetbook"> 
</a> 
</div> 

http://jsfiddle.net/cw6hN/

Я ищу применить нарастающий в CSS переход, правильно позиционирует изображение опрокидывания, а затем исчезает с непрозрачностью 1. Я могу сделать это на стандартной кнопке (не реагирующей), но не понял, как ее применять к приведенному выше сценарию. Любая помощь в том, как наилучшим образом достичь этого, будет наиболее оценена.

Заранее благодарен!

D

Answer 1

Обновлено JSFiddle, как вы хотели, но с использованием 2 отдельных изображений.

Добавить это a.widgetbook

transition:all .6s;

JSFiddle

Чтобы получить «замирание в» аффект, который вы ищете, вам необходимо создать два разных изображения.