<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/koenigsegg1/pen/XXqpQR?depth=everything&order=popularity&page=53&q=Overlay&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel='stylesheet' type='text/css'>
<style class="cp-pen-styles">body {
background: #2F2F3B url("https://guildhallshoppingexeter.co.uk/wp-content/uploads/2015/05/GH-Queen-Street-Dining-Banner.jpg") -100px 0px/155%;
min-height: 100vh;
margin: 0;
overflow: hidden;
transition: .5s;
}
body.expanded {
background: url("https://guildhallshoppingexeter.co.uk/wp-content/uploads/2015/05/GH-Queen-Street-Dining-Banner.jpg") -400px -56px/150%;
}
body.expanded p.center {
left: 100%;
transform: translateX(0);
}
body.expanded .num {
opacity: 0;
}
.overlay {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
transition: .3s;
}
.overlay.expanded {
background: rgba(0, 0, 0, 0.3);
}
.name {
width: 75vh;
color: white;
white-space: nowrap;
position: absolute;
right: 50%;
transform: translateX(50%);
z-index: 2;
transition: .5s;
}
.name h1 {
font: 100 8.5vh Roboto;
margin-top: 2vh;
margin-bottom: 0;
top: 0;
}
.name span {
margin-top: -10px;
font: 500 3vh Roboto;
top: 15vh;
}
.name h3 {
margin: 0;
font: 300 4.5vh Roboto;
top: 18vh;
}
.name.expanded {
right: 0;
transform: translateX(0);
}
.name.expanded .center {
left: 10px;
transform: translateX(0);
}
p {
color: white;
margin: 0;
font: 500 5.5vh Roboto;
top: 25vh;
z-index: 0 !important;
}
.center {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: .5s;
}
.ratings {
position: absolute;
top: 60vh;
left: -320px;
color: #FFF;
font: 900 12vh Roboto;
width: 300px;
transition: 0.5s cubic-bezier(0.39, 0.01, 0.08, 1);
}
.ratings.expanded {
left: 5vh;
}
.ratings:after {
content: '';
position: absolute;
left: -100px;
bottom: -2vh;
height: 2px;
width: 175%;
background: rgba(255, 255, 255, 0.5);
}
.rate {
position: absolute;
top: 80vh;
left: -100%;
transition: .5s;
}
.rate.expanded {
left: 5vh;
}
.rate img.profile {
display: inline-block;
height: 56px;
width: 56px;
border-radius: 50%;
}
.rate .star {
display: inline-block;
max-width: 250px;
}
.rate .star b {
color: white;
font: 500 3vh Roboto;
}
.rate .star img.stars {
height: 2.8vh;
}
.rate .star p {
font: 300 2vh Roboto;
}
.right-panel {
background: #EE5F81;
width: 75vh;
height: 100vh;
position: absolute;
top: 100%;
right: 0;
z-index: 1;
transition: 0.5s cubic-bezier(0.6, 0, 0, 1);
}
.right-panel.under {
transition: 0.5s cubic-bezier(1, 0.01, 0.4, 1);
background: rgba(255, 255, 255, 0.7);
position: absolute;
}
.right-panel.expanded {
top: 0;
transition: 0.5s cubic-bezier(1, 0.01, 0.4, 1);
}
.right-panel.expanded.under {
transition: 0.5s cubic-bezier(0.6, 0, 0, 1);
}
.right-right {
box-sizing: border-box;
background: #F9F9F9;
height: 40vh;
width: 40vh;
padding: 10px;
position: absolute;
top: 50%;
right: -40vh;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), 0 14px 56px rgba(0, 0, 0, 0.25);
z-index: 2;
transform: translateY(-50%);
transition: 0.5s cubic-bezier(0.77, 0, 0.45, 0.78);
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.right-right.expanded {
right: 0;
}
.right-right .action {
cursor: pointer;
}
.right-right .action div {
color: #444;
text-align: center;
text-transform: uppercase;
font: 500 3vh Roboto;
}
.right-right img {
height: 8vh;
padding: 2vh 4vh;
}
.select {
position: absolute;
top: 50%;
right: 50vh;
color: #444;
font: 700 3vh Roboto;
z-index: 2;
transform: translateY(-50%);
transition: .5s;
background: #FFFF88;
width: 20vh;
padding: 8px 0;
opacity: 0;
visibility: hidden;
}
.select.expanded {
opacity: 1;
visibility: visible;
}
button {
border: none;
outline: none;
color: #FFF;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
}
.tables {
display: flex;
flex-wrap: wrap;
width: 60vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 35vh;
}
.tables .num {
box-sizing: border-box;
display: inline-block;
background: #F9F9F9;
margin: 5vh 6vh;
width: 8vh;
height: 8vh;
padding: 2vh 0;
border-radius: 50%;
font: 300 4vh/4vh Roboto;
text-align: center;
cursor: pointer;
transition: .5s;
}
.tables .disabled {
background: rgba(255, 255, 255, 0.4);
cursor: default;
}
.actions {
width: 38vw;
margin: auto;
position: absolute;
bottom: 12vh;
left: 0;
right: 0;
transition: .3s;
}
.actions.expanded {
bottom: -5vh;
}
.actions button {
height: 8vh;
width: 15vw;
border: none;
outline: none;
position: absolute;
color: #FFF;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
}
.actions button:nth-child(1) {
left: 0;
background: #EE5F81;
}
.actions button:nth-child(2) {
right: 0;
background: transparent;
border: 2px solid rgba(244, 244, 244, 0.3);
}
</style></head><body>
<body class="expanded">
<div class="overlay"></div>
<div class="name expanded">
<h1 class="center">Octopus Bar</h1><br/><span class="center">567 Hudson St.</span><br/>
<h3 class="center">Fresh fruit and fish</h3>
</div>
<p class="center">Choose a table:</p>
<div class="ratings expanded">Ratings:</div>
<div class="rate expanded"> <img class="profile" src="https://cbwconline.com/IMG/Codepen/Woman-Profile.jpg"/>
<div class="star"><b>Jennifer Dawson </b><img class="stars" src="https://cbwconline.com/IMG/Codepen/4-star.svg"/>
<p>It's an unforgettable venue for those who like not only to eat out, but also enjoy unique atmospheres and delicious refreshments. Fish and fruit are super-fresh and taste awesome!</p>
</div>
</div>
<button class="select expanded">Book</button>
<div class="right-panel under expanded"></div>
<div class="right-panel expanded"></div>
<div class="right-right expanded">
<div class="action"><img src="https://cbwconline.com/IMG/Codepen/Add-Line.svg"/>
<div>ADD TO</div>
</div>
<div class="action"><img src="https://cbwconline.com/IMG/Codepen/Share-Line.svg"/>
<div>Share</div>
</div>
<div class="action"><img src="https://cbwconline.com/IMG/Codepen/Heart-Line.svg"/>
<div>Heart</div>
</div>
<div class="action"><img src="https://cbwconline.com/IMG/Codepen/Report-Line.svg"/>
<div>Report</div>
</div>
</div>
<div class="tables">
<div class="num">1</div>
<div class="num disabled">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
<div class="num disabled">6</div>
<div class="num">7</div>
<div class="num disabled">8</div>
<div class="num disabled">9</div>
</div>
<div class="actions expanded">
<button class="cancel">cancel</button>
<button>continue</button>
</div>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$('.cancel ,.select').on('click', function() {
$('body ,.right-panel, .name, .right-right, .select, .rate, .ratings ,.actions ,.overlay').toggleClass('expanded');
// $('.overlay').to
});
//# sourceURL=pen.js
</script>
</body></html>
