Как создать ролловер для поля с изображением?

Question

У меня есть контейнер (ширина 500 пикселей и высота 800 пикселей). Контейнер использует изображение в качестве фона, а в середине я хочу добавить кнопку с надписью "зарегистрироваться". Когда пользователь нажимает кнопку регистрации, я хочу, чтобы форма регистрации появлялась в том же контейнере.

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

Как я могу сделать это? Любые идеи будут оценены. Спасибо!

Answer 1

Вы можете разместить 2 контейнера друг на друге и постепенно вывести их наружу - DEMO

HTML

<section>
    <div id="lower">
        <button> Close </button>
    </div>

    <div id="upper">
        <button> Sign up </button>
    </div>
</section>

CSS

div {
    position: absolute;
    left: 20px;
    top: 20px;
    height: 300px;
    width: 400px;
    line-height: 300px;
    text-align: center;
}

#lower { background: honeydew; }
#upper { background: beige; }

JQuery

$("#upper button").on("click", function() {
    $("#upper").fadeOut(300);
});


$("#lower button").on("click", function() {
    $("#upper").fadeIn(300);
});