<div class="wrapper">
<div class="rect content"><p>OCTOPUSH</p><span>This is the unexpected game</span></div>
<div class="rect top"></div>
<div class="rect right"></div>
<div class="rect bottom"></div>
<div class="rect left"></div>
</div>
<div class="menu"></div>
<div class="background"></div>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);
* {
margin:0;
padding:0;
outline:none;
list-style:none;
text-decoration:none;
box-sizing:border-box;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: #202020;
font-family: 'Roboto', sans-serif;
}
.wrapper {
height: 80%;
width: 60%;
position: absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
overflow:hidden;
}
.rect {
position:absolute;
width: 100%;
height: 100%;
transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
-webkit-transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
-moz-transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
}
.rect:after{
content:"";
width: 100%;
height: 100%;
position: absolute;
}
.top {
top:0;left:3px;
border-top:3px solid rgba(249,85,21,0.3);
}
.right {
top:3px;
right:0;
border-right:3px solid rgba(249,85,21,0.3);
}
.bottom {
bottom:0;right:3px;
border-bottom:3px solid rgba(249,85,21,0.3);
}
.left {
bottom:3px;left:0;
border-left:3px solid rgba(249,85,21,0.3);
}
.top.active {
left:200%;
}
.right.active {
top:200%;
}
.bottom.active {
right:200%;
}
.left.active {
bottom:200%;
}
.top:after {
border-top:3px solid rgba(249,85,21,1);
left:-200%;
top:-3px;
}
.right:after {
border-right:3px solid rgba(249,85,21,1);
top:-200%;
right:-3px;
}
.bottom:after {
border-bottom:3px solid rgba(249,85,21,1);
right:-200%;
bottom:-3px;
}
.left:after {
border-left:3px solid rgba(249,85,21,1);
bottom:-200%;
left:-3px;
}
.menu {
position: absolute;
bottom:7%;left:0;right:0;
margin:0 auto;
height:50px;
width: 50px;
background: #f95515;
transition: 0.3s all ease-in-out;
}
.menu.active {
background: #fff;
bottom:2%;
}
.content {
transform: scale(0);
padding:12% 0;
opacity: 0;
transition: 0.2s all cubic-bezier(.21,.63,.75,.36) 0s;
-webkit-transition: 0.2s all cubic-bezier(.21,.63,.75,.36) 0s;
-moz-transition: 0.2s all cubic-bezier(.21,.63,.75,.36) 0s;
}
.content.active {
transform: scale(1);
opacity: 1 !important;
transition: 0.2s all ease-in-out 0.6s;
-webkit-transition: 0.2s all ease-in-out 0.6s;
-moz-transition: 0.2s all ease-in-out 0.6s;
}
.content p, .content span{
width: 100%;
color:#fff;
font-size:72px;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
display:block;
vertical-align:middle;
margin:0 auto;
}
.content span {
font-size:14px;
}
.background {
opacity: 0.3;
position:absolute;
width: 100%;
height: 100%;
z-index:-1;
background: url(http://desktopography.net/media/exhibition/2013/slouchin_evelyn/large.jpg) no-repeat center top;
background-size:cover;
transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
-webkit-transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
-moz-transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
}
.background.active {
filter:blur(10px);
-webkit-filter:blur(10px);
}
$('.menu').click(function(){
$('.rect').toggleClass('active');
$('.background').toggleClass('active');
$(this).toggleClass('active');
})
This Pen doesn't use any external CSS resources.