CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Denby Arnot
Denby Arnot

Reputation: 55

Overlay a div and have it fade away after clicking a link

So I need this div to be overlayed over a much more complex website on load, and fade away when is clicked, like a welcome splash screen of sorts. I've had a good look at others resposes and I'm not quite understanding the jquery side of it. Unfortunately I dont have enough experience in it. I got an image overlayed that disappeared on click, however this div has a separate div with an enter image that fades in and out with webkit, so using the whole div is what I'm struggling to achieve. heres my current layout (minus the more complex site)

HTML:

<div id="wrapper_index">
<div id="enter_button"> <a href="home.html"><img src="images/enter_button.png" width="138" height="50" class="withfadein"/></a>
</div>
</div>

CSS:

#wrapper_index {
    height: 686px;
    width: 1024px;
    background-color: #000;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    background-image: url(images/entry_image-01.png);
    background-repeat: no-repeat;
    position: relative;
}
#enter_button {
    width: 140px;
    position: absolute;
    left: 434px;
    top: 501px;
}
.withfadein{
    opacity: 0;
    -webkit-animation: load 20s linear forwards;
}

@-webkit-keyframes load{
    from{opacity: 0;}
    to{opacity: 1;}
}
.withfadein2{
    opacity: 0;
    -webkit-animation: load 10s linear forwards;
}

@-webkit-keyframes load{
    from{opacity: 0;}
    to{opacity: 1;}
}
.withfadeout { 
-webkit-transition: all 2s ease-in-out; 
-moz-transition: all 2s ease-in-out; 
-ms-transition: all 2s ease-in-out; 
-o-transition: all 2s ease-in-out; 
transition: all 2s ease-in-out; 
} 
.withfadeout:hover { 
-webkit-opacity: 0.25; 
-moz-opacity: 0.25; 
opacity: 0.25; 
}

Upvotes: 0

Views: 1447

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

You can do this relatively easily with jQuery and you can forget all the CSS animation.

Demo: http://jsfiddle.net/robschmuecker/p6vKU/

JS:

$('#enter_button').on('click', function () {
    $('#wrapper_index').fadeOut();
});

Upvotes: 3

Related Questions