"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<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/travisw/pen/yaWrgV?depth=everything&order=popularity&page=54&q=Overlay&show_forks=false" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,900'> <style class="cp-pen-styles">html { background-color: #fefefe; box-sizing: border-box; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 400; } *, *:before, *:after { box-sizing: inherit; } .u-float-right { float: right; } .u-flex-center { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .u-clearfix:before, .u-clearfix:after { content: " "; display: table; } .u-clearfix:after { clear: both; } .u-clearfix { *zoom: 1; } .container { box-shadow: 0 0 50px rgba(0,0,0,.3); margin: 10px auto; overflow: hidden; width: 360px; } .header-container { position: relative; } .header-image { left: 0; position: absolute; top: 0; z-index: -1; height: auto; -webkit-animation: zoomEffect 35s infinite; animation: zoomEffect 35s infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @-webkit-keyframes zoomEffect { 0% { -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } 100% { -webkit-transform: scale(1.2) translateX(-360px) translateY(-80px); transform: scale(1.2) translateX(-360px) translateY(-80px); } } @keyframes zoomEffect { 0% { -webkit-transform: scale(1) translateX(0) translateY(0); transform: scale(1) translateX(0) translateY(0); } 100% { -webkit-transform: scale(1.2) translateX(-360px) translateY(-80px); transform: scale(1.2) translateX(-360px) translateY(-80px); } } .header { color: #fff; padding: 15px; height: 300px; } .header > svg { cursor: pointer; } .main-heading { color: #fff; font-size: 26px; font-weight: 300; margin-bottom: 12px; } .tag { background-color: rgba(255, 255, 255, .35); border-radius: 20px; font-size: 11px; margin-right: 8px; padding: 4px 10px; text-transform: uppercase; } .stats { margin-top: 35px; } .stat-module { display: inline-block; font-size: 12px; margin-right: 20px; text-transform: uppercase; } .stat-number { display: inline-block; font-weight: 600; margin-left: 4px; } .overlay-header { background-color: #eee; height: 100px; margin: -50px 0 0 -25%; transform: rotate(-10deg); width: 150%; z-index: 0; } .body { background-color: #eee; color: #555; margin-top: -50px; padding: 0 15px 15px; position: relative; } .body-image { border-radius: 100%; box-shadow: 5px 10px 75px rgba(0, 0, 0, .4); float: left; margin: -90px 0 20px; position: relative; z-index: 2; } .body-action-button { background-color: #383838; border-radius: 50%; box-shadow: 1px 2px 12px rgba(0,0,0,.4); cursor: pointer; height: 40px; position: absolute; right: 15px; top: -97px; width: 40px; } .body-stats { display: inline-block; font-size: 12px; font-weight: 700; float: left; margin: -14px 0 0 30px; position: relative; text-transform: uppercase; width: 20%; } .body-stats > span { display: inline-block; font-weight: 900; margin-top: 8px; } .body-info { clear: left; position: relative; max-height: 100px; overflow: hidden; transition: all 600ms ease-out; } .body-more { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(238,238,238,1) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(238,238,238,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(238,238,238,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#eeeeee',GradientType=0 ); cursor: pointer; margin: -57px auto 0px; padding: 20px 0 20px; position: relative; text-align: center; } .body-more span { background-color: #fff; border-radius: 50%; box-shadow: 1px 1px 5px rgba(0,0,0,.3); display: inline-block; height: 6px; margin-right: 2px; width: 6px; } .card { background: #fff; border-radius: 2px; box-shadow: 0 0 5px rgba(0, 0, 0, .15); margin-top: 15px; padding: 10px; } .card-heading { font-size: 12px; text-transform: uppercase; } .card-more { cursor: pointer; float: right; } .card-list { list-style-type: none; margin: 10px 0 0; overflow-x: scroll; padding: 0; white-space: nowrap; } .card-list::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); border-radius: 2px; background-color: #F5F5F5; } .card-list::-webkit-scrollbar { height: 3px; background-color: #F5F5F5; } .card-list::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2); background-color: #ddd; } .card-list li { display: inline; margin-left: 10px; } .card-list li:first-child { margin-left: 0; }</style></head><body> <div class="container"> <div class="header-container"> <img src="https://s17.postimg.org/ypm5ye95r/image.jpg" alt="" class="header-image" /> <div class="header"> <svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg" class="header-icon"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> </svg> <svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg" class="u-float-right header-icon"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg> <h1 class="main-heading">Hugh Jackman</h1> <span class="tag">Actor</span> <span class="tag">Producer</span> <div class="stats"> <span class="stat-module"> Movies <span class="stat-number">56</span> </span> <span class="stat-module"> Plays <span class="stat-number">29</span> </span> <span class="stat-module"> Musicals <span class="stat-number">11</span> </span> </div> </div> <!-- END header --> </div> <div class="overlay-header"></div> <div class="body"> <img src="https://s17.postimg.org/xcbukrwdr/Hugh_Jackman_f.jpg" alt="Hugh Jackman" class="body-image" /> <div class="body-action-button u-flex-center"> <svg fill="#ffffff" height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg"> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg> </div> <span class="body-stats">Followers <span>3.5k</span></span> <span class="body-stats">Following <span>1.9k</span></span> <div class="u-clearfix"></div> <div class="body-info"> <p> Hugh Michael Jackman is an Australian actor, singer and producer. Jackman has won international recognition for his roles in variety of film genres. </p> <p> In Broadway theatre, Jackman won a Tony Award for his role in The Boy from Oz. A four-time host of the Tony Awards themselves, he won an Emmy Award for one of these appearances. Jackman also hosted the 81st Academy Awards on 22 February 2009. </p> </div> <div class="body-more"> <span></span> <span></span> <span></span> </div> <div class="card u-clearfix"> <span class="card-heading">Movies</span> <span class="card-more"> <svg fill="#777777" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/> </svg> </span> <ul class="card-list"> <li><img src="https://s12.postimg.org/c0ryp65lp/m1f.jpg" alt="" /></li> <li><img src="https://s14.postimg.org/6ts0it3xt/m2f.jpg" alt="" /></li> <li><img src="https://s13.postimg.org/ri499o2zr/m3f.jpg" alt="" /></li> </ul> </div> </div> </div> </body></html>

Related: See More


Questions / Comments: