How to create a rollover for an image box?

Question

I have a container (500px width and height 800px). THe container users an image as a background and in the middle I want to add a button that says "sign up." When a user clicks on the sign up button I want a sign up form that pops in the same container.

In other words I need a rollover effect where the background changes color to something else and the same container is used a sign up box. And I need the transformation to stay until the user hits the close button or something like that.

How can I accomplish this? Any ideas will be appreciated. Thanks!

Answer 1

You can place the 2 containers on top of each other and fade in/out the top one - 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);
});