CSS Background Transition & Responsive (исчезает)

Question

CSS Background Transition & Responsive (исчезает)

0

Член этого форума был достаточно любезен, чтобы предоставить следующий код опрокидывания 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

user2325396 19 дек. 2013, в 10:14

Источник

0

Вам разрешено использовать jQuery?
Dropout 19 дек. 2013, в 08:34
0

Привет DropOut, нет Jquery в этом случае. Просто чистый CSS
user2325396 19 дек. 2013, в 09:02

Теги:

html

css

responsive-design

transitions

fadein

1 ответ

Ещё вопросы

Привет DropOut, нет Jquery в этом случае. Просто чистый CSS

Albzi · Answer 1 · 2013-12-19T07-32-00.000Z

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

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

transition:all.6s;

JSFiddle

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

Привет BeatAlex, спасибо за ответ. Кажется, что ваш пример Jsfiddle не учитывает изменение размера кнопки. Я действительно нашел некоторый код здесь на форумах и соединил его в этом. Это работает, насколько я могу судить, и использует один образ для загрузки. Мне все еще было бы интересно услышать любые мысли от остальной части сообщества о том, что я придумал. jsfiddle.net/cw6hN/1
@ user2325396 Это прекрасно работает (твой jsfiddle), если бы я был тобой, я бы пошел с этим! Чистый, использует только CSS и работает отлично! :)