<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/romswellparian/pen/MYxYVO?depth=everything&order=popularity&page=46&q=Overlay&show_forks=false" />
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Poiret+One|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic|Oswald:400,300,700|Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<style class="cp-pen-styles">*,*::before,*::after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Placeholder color*/
input::-webkit-input-placeholder { color: #65737e;}
input:-moz-placeholder { color: #65737e;}
input::-moz-placeholder { color: #65737e;}
input:-ms-input-placeholder { color: #65737e;}
html, body {
background: #009CF2;
color: #555;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1em;
margin: 0;
padding: 0;
position: relative;
}
a {
color: inherit;
text-decoration: none;
}
form {
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
input {
background: transparent;
border: 1px solid rgba(255,255,255,.35);
border-radius: 26px;
color: inherit;
font-size: 14px;
height: 20px;
line-height: 20px;
outline: 0;
margin: 0;
padding: 6px 14px;
width: calc(100% - 30px);
}
input:focus {
border-color: #08F;
}
button {
outline: 0;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
footer, header, section,
.container, .box {
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: initial;
}
.phone {
height: 640px;
overflow: hidden;
margin: 1em auto;
padding: 0;
position: relative;
width: 360px;
}
#header {
background: rgba(0,0,0,.8);
color: #FFF;
height: 28px;
left: 0;
line-height: 28px;
margin: 0;
padding: 0;
position: relative;
right: 0;
text-align: right;
top: 0;
width: initial;
z-index: 9999999999;
}
#header > span {
display: inline-block;
padding: 0 5px;
vertical-align: middle;
}
#header > span:last-child {
padding: 0 14px 0 8px;
}
.app {
background: #182329;
box-shadow: 0 0 10px rgba(0,0,0,.35);
height: 552px;
margin: 0 auto 0;
width: 360px;
z-index: 2;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.app.active {
-webkit-transform: translateX(290px);
-moz-transform: translateX(290px);
transform: translateX(290px);
}
.app-overlay {
background: #182329;
bottom: 0;
height: 552px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 28px;
width: 360px;
z-index: 1;
-webkit-transform: translateX(-290px);
-moz-transform: translateX(-290px);
transform: translateX(-360px);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.app-overlay.active {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}
.app-overlay > .box {
background: rgba(0,0,0,.25);
color: #FFF;
height: 552px;
margin: 0 80px 0 0;
overflow: hidden;
position: relative;
width: 290px;
}
.app-overlay > .box > .header {
background-image: url('https://goo.gl/zkzr83');
background-position: center;
background-size: cover;
border-bottom: 1px solid rgba(0,0,0,.65);
box-shadow: none;
display: block;
height: 134px;
line-height: 1;
margin: 0;
padding: 0;
text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.app-overlay > .box > .header > span#config {
color: rgba(255,255,255,.75);
cursor: pointer;
font-size: 24px;
margin: 6px 6px 0 auto;
padding: 10px;
position: absolute;
right: 0;
top: 0;
z-index: 4;
}
.app-overlay > .box > .header > span#config:hover {color: #FFF;}
.app-overlay > .box > .header > span#config.active {
color: rgba(0,0,0,.25);
}
.app-overlay > .box > .header > h2 {
background: rgba(0,0,0,.5);
display: block;
font-size: 20px;
height: 60px;
line-height: 60px;
margin: 0;
padding: 20px;
}
.app-overlay > .box > .header > h2 > img {
border-radius: 50%;
display: inline-block;
height: 60px;
margin: 0 20px 0 0;
object-fit: cover;
vertical-align: middle;
width: 60px;
}
.app-overlay > .box > .header > h2 > span {
display: inline-block;
vertical-align: middle;
}
.app-overlay > .box > .header > h3 {
background: rgba(0,0,0,.5);
color: rgba(255,255,255,.65);
display: block;
font-size: 14px;
font-weight: 400;
margin: 0;
padding: 0 20px 20px;
text-align: end;
}
.app-overlay > .box > .header > h3 > span {
color: #FFF;
padding: 0 14px 0 8px;
}
.app-overlay > .box > .container {
height: 397px;
margin: 0;
overflow-X: hidden;
overflow-Y: auto;
padding: 10px 0;
position: relative;
width: initial;
}
.app-overlay > .box > .container::-webkit-scrollbar {
background: transparent;
width: 5px;
}
.app-overlay > .box > .container::-webkit-scrollbar-tack {
background: transparent;
width: 5px;
}
.app-overlay > .box > .container::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.15);
border-radius: 4px;
width: 5px;
}
.app-overlay > .box > .container > .box {
border-top: 2px solid rgba(255,255,255,.25);
height: auto;
padding: 0;
}
.app-overlay > .box > .container > .box:first-child {
border-top: 0;
}
.app-overlay > .box > .container > .box > ul,
.app-overlay > .box > .container > .box > ul > li {
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
.app-overlay > .box > .container > .box > ul > li {
background: transparent;
height: 40px;
line-height: 40px;
padding: 6px 20px;
}
.app-overlay > .box > .container > .box > ul > li:hover {
background: rgba(0,0,0,.35);
}
.app-overlay > .box > .container > .box > ul > li > a {
color: rgba(255,255,255,.65);
font-size: 18px;
}
.app-overlay > .box > .container > .box > ul > li > a > span {
color: #FFF;
font-size: 20px;
padding-right: 20px;
}
.header {
background: rgba(255,255,255,.04);
box-shadow: 0 0 0 2px rgba(0,0,0,.15), 0 0 2px 2px rgba(0,0,0,.15);
display: flex;
height: 70px;
line-height: 30px;
margin: 0 auto;
overflow: hidden;
padding: 0 0 10px;
position: relative;
width: initial;
z-index: 2;
}
.header > .box {
color: #FFF;
font-family: 'Oswald', sans-serif;
font-size: 22px;
font-weight: 700;
height: 34px;
line-height: 34px;
padding: 20px 0 10px;
text-align: center;
width: 100%;
}
.header > .box:first-child {
padding: 20px 10px 10px 20px;
text-transform: uppercase;
width: 300px;
}
.header > .box:last-child {
padding: 20px 10px 10px 10px;
width: 40px;
}
.header > .box > form {
height: inherit;
width: inherit;
z-index: 8;
}
.header > .box > form > .container {
white-space: nowrap;
position: absolute;
top: 50%;
left: 50%;
width: inherit;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.header > .box > form > .container:hover input#search {
background: rgba(0,0,0,.5);
width: calc(100% - 44px);
}
.header > .box > form > .container:hover .icon {color: rgba(255,255,255,.85);}
.header > .box > form > .container input#search {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 4px;
height: 34px;
background: rgba(0,0,0,0);
border: none;
font-size: 10pt;
float: right;
color: #262626;
padding: 0 34px 0 10px;
border-radius: 5px;
color: #fff;
-webkit-transition: width 0.55s ease;
-moz-transition: width 0.55s ease;
transition: width 0.55s ease;
}
.header > .box > form > .container input#search:focus,
.header > .box > form > .container input#search:active {
background: rgba(0,0,0,.5);
outline: none;
width: calc(100% - 44px);
}
.header > .box > form > .container .icon {
position: absolute;
right: 0;
left: auto;
margin: 0 8px 0 0;
z-index: 1;
color: rgba(255,255,255,.5);
}
.header > .box > form > input {
border-color: transparent;
}
.header > .box > form > button {
background: transparent;
border: 0;
color: #FFF;
margin: 0 10px 0 4px;
padding: 6px;
position: absolute;
right: 0;
top: 6px;
}
.header > .box > form > button > span {
font-size: 20px;
}
.header > .box > span {
font-size: 26px;
line-height: 34px;
}
.header > .box > #main, .header > .box > #meny {cursor: pointer;}
.header > .box > #main.active, .header > .box > #meny.active {
color: rgba(0,0,0,.45);
}
.header > .box > #main {
padding: 0 10px 0 0;
}
.body {
background: transparent;
height: 472px;
overflow: hidden;
padding: 0 5px;
position: relative;
width: 350px;
z-index: 1;
}
.body > .container {
height: 432px;
margin: 0;
overflow-X: hidden;
overflow-Y: auto;
padding: 20px 0;
position: relative;
width: 100%;
}
.body > .container::-webkit-scrollbar {
background: transparent;
width: 5px;
}
.body > .container::-webkit-scrollbar-tack {
background: transparent;
width: 5px;
}
.body > .container::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.15);
border-radius: 4px;
width: 5px;
}
.body > .container:before {
background: rgba(255,255,255,.15);
bottom: 0;
content: "";
left: 36px;
position: absolute;
top: 0;
width: 2px;
}
.body > .container > .box {
margin: 10px auto 20px;
}
.body > .container > .box > h2 {
color: #FFF;
font-size: 16px;
margin: 10px 0;
overflow: hidden;
padding: 10px 10px;
position: relative;
}
.body > .container > .box > span.favorite {
background: #182329;
border: 2px solid rgba(255,255,255,.15);
border-radius: 50%;
color: rgba(0,0,0,.35);
cursor: pointer;
left: 20px;
padding: 6px;
position: absolute;
top: 80px;
}
.body > .container > .box span.favorite.active > .fa {color: #EF1E59;}
.body > .container > .box > h2 > img {
border-radius: 50%;
box-shadow: 1px 1px 2px 0px rgba(0,0,0,.25);
float: left;
height: 56px;
margin: -10px 20px 0 0;
object-fit: cover;
width: 56px;
}
.body > .container > .box > h2 > span {
color: rgba(255,255,255,.5);
display: block;
font-size: 13px;
}
.body > .container > .box > article {
border-bottom: 2px solid rgba(255,255,255,.15);
margin: 10px 10px 10px 85px;
padding: 0 0 20px;
}
.body > .container > .box > article img {
border-radius: 3px;
box-shadow: 1px 1px 3px 2px rgba(0,0,0,.25);
width: 100%;
}
.footer {
background: rgba(0,0,0,.8);
bottom: 0;
display: flex;
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
right: 0;
text-align: center;
z-index: 3;
}
.footer > .box {
padding: 20px 0;
width: 33.333333333%;
}
.footer > .box > span {
color: #FFF;
cursor: pointer;
font-size: 20px;
}
.body > .container > .box > span.favorite, .app, .app-overlay {
background: #08F;
}
</style></head><body>
<section>
<div class="container">
<div class="phone">
<div class="app-overlay">
<div class="box">
<div class="header">
<span id="config" class="fa fa-gear"></span>
<h2><img src="https://goo.gl/brKlDp" alt="" /><span>Anna</span></h2>
<h3>
<span class="fa fa-map-marker"></span> Frozen
<span> Age</span> 17
</h3>
</div>
<div class="container">
<div class="box">
<ul>
<li><a href="#"><span class="fa fa-user"></span> Profile</a></li>
<li><a href="#"><span class="fa fa-search"></span> Search Friends</a></li>
<li><a href="#"><span class="fa fa-music"></span> Musics</a></li>
<li><a href="#"><span class="fa fa-users"></span> Friends</a></li>
</ul>
</div>
<div class="box">
<ul>
<li><a href="#"><span class="fa fa-list"></span> Playlists</a></li>
<li><a href="#"><span class="fa fa-info-circle"></span> Help</a></li>
<li><a href="#"><span class="fa fa-power-off"></span> Log Out</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="header">
<span><i class="fa fa-volume-up"></i></span>
<span><i class="fa fa-wifi"></i></span>
<span><i class="fa fa-globe"></i></span>
<span>09:15</span>
</div>
<div class="box app">
<div class="header">
<div class="box">
<span id="main" class="fa fa-navicon"></span> Frozen
</div>
<div class="box">
<form action="">
<div class="container">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</form>
</div>
<div class="box">
<span id="meny" class="fa fa-ellipsis-v"></span>
</div>
</div>
<div class="body">
<div class="container">
<div class="box">
<h2><img src="https://goo.gl/kG0zvn" /> Elsa - Frozen
<span>15 minutes ago</span>
</h2>
<span class="favorite"><i class="fa fa-heart"></i></span>
<article>
<img src="https://goo.gl/6aB0BX" alt="" />
</article>
</div>
<div class="box">
<h2><img src="https://goo.gl/brKlDp" /> Anna - Frozen
<span>25 minutes ago</span>
</h2>
<span class="favorite active"><i class="fa fa-heart"></i></span>
<article>
<img src="https://goo.gl/PmrgmX" alt="" />
</article>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="box"><span class="fa fa-play"></span></div>
<div class="box"><span class="fa fa-circle-thin"></span></div>
<div class="box"><span class="fa fa-square-o"></span></div>
</div>
</div>
</div>
</section>
<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 src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script >$(function() {
$('.favorite').bind('click', function() {
$(this).toggleClass('active');
});
$('#main').click(function() {
$(this).toggleClass('active');
$('.box.app').toggleClass('active');
$('.app-overlay').toggleClass('active');
});
})
//# sourceURL=pen.js
</script>
</body></html>
