"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/felipekm/pen/zvrJbV?depth=everything&order=popularity&page=73&q=pack&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto:400,300); html { height: 100%; } body { height: 100%; } button:focus { outline: none; } button:hover { opacity: .8; } .fa { font-size: 18px; color: white; font-width: light; } #container { width: 330px; height: 420px; max-width: 330px; background: white; position: relative; top: 50%; left: 50%; overflow: hidden; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25); transform: translate3d(-50%, -50%, 0); } h2 { padding: 20px; color: white; background: #3E4FB2; font-weight: 300; text-align: center; font-size: 18px; font-family: 'Roboto', sans-serif; } .detail { color: #777; padding: 20px; line-height: 1.2; font-family: 'Roboto', sans-serif; height:30px; border-bottom: dotted 1px silver; } .img-wrapper { padding: 0; position: relative; } .img-wrapper:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(62, 79, 178, .25); width: 100%; } .img-wrapper img { width: 100%; height: 150px; -o-object-fit: cover; object-fit: cover; margin: 0; display: block; position: relative; } .button-wrapper { width: 50px; height: 100%; position: absolute; top: -190px; right: 20px; bottom: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } button { width: 50px; height: 50px; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); z-index: 9; position: relative; } .main-button { background: #3E4FB2; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .ripple { position: absolute; left: 0; right: 0; bottom: 0; top: 0; border-radius: 50%; z-index: -9; background: transparent; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); -webkit-transition: .3s all ease; transition: .3s all ease; opacity: 1; } .rippling { -webkit-animation: .3s rippling 1; animation: .3s rippling 1; -moz-animation: .3s rippling 1; } @-webkit-keyframes rippling { 25% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @-moz-keyframes rippling { 25% { -moz-transform: scale(1.5); transform: scale(1.5); opacity: 1; } 100% { -moz-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes rippling { 25% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .layer { position: absolute; left: 0; right: 0; bottom: 0; width: 50px; height: 50px; background: white; border-radius: 50%; z-index: -99; pointer-events: none; } .button-wrapper.clicked { transform: translateX(-300px); right: 0; bottom: 0; transition: .3s all ease .6s; } .button-wrapper.clicked .main-button { opacity: 0; -webkit-transition: .3s all ease .3s; transition: .3s all ease .3s; } .button-wrapper.clicked .layer { -webkit-transform: scale(100); -ms-transform: scale(100); transform: scale(100); -webkit-transition: 2.25s all ease .9s; transition: 2.25s all ease .9s; } .layered-content { border-top: solid 40px rgba(62, 79, 178, .25); position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; opacity: 0; } .layered-content.active { opacity: 1; } .close-button { background: yellow; position: absolute; right: 20px; top: 20px; color: #ff2670; } .layered-content.active .close-button { -webkit-animation: .5s bounceIn; animation: .5s bounceIn; } .layered-content .content img { width: 80px; -webkit-shape-outside: 80px; shape-outside: 80px; border-radius: 50%; display: block; margin: 0 auto 15px; padding: 10px; box-sizing: border-box; background: white; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); -webkit-transition: .3s all ease; transition: .3s all ease; } .content p { color: white; font-weight: 300; text-align: center; line-height: 1.5; font-family: 'Roboto', sans-serif; } .content p a { font-size: 12px; background: white; padding: 2.5px 5px; color: #ff2670; ; text-decoration: none; border-radius: 50px; display: inline-block; margin-left: 1.5px; } .content img, .content p { opacity: 0; position: relative; top: -7.5px; } .layered-content.active .content img { opacity: 1; top: 0; -webkit-transition: .5s all ease .5s; transition: .5s all ease .5s; } .layered-content.active .content p { opacity: 1; top: 0; -webkit-transition: .5s all ease 1s; transition: .5s all ease 1s; }</style></head><body> <main id="container"> <h2>Aplicações Contratadas</h2> <!-- IMAGE --> <div class="img-wrapper"> <img src="data:image/jpeg;base64,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" alt="Just Background"> </div> <!-- CARD FRONT CONTENT --> <div> <p class="detail"> <span style="float: left">Sistema Integra</span> <span style="float: right; color: blue; margin-top:8px;">Ativo</span> <span style="position: relative; clear:left; float:left; font-size:8pt;">5 usuários</span> </p> <p class="detail"> <span style="float: left">CMS</span> <span style="float: right; color: red; margin-top:8px;">Inativo</span> <span style="position: relative; clear:left; float:left; font-size:8pt;">1 usuário</span> </p> <p class="detail"> <span style="float: left">Accounts</span> <span style="float: right; color: red; margin-top:8px;">Inativo</span> <span style="position: relative; clear:left; float:left; font-size:8pt;">3 usuários</span> </p> </div> <!-- BUTTON --> <div class="button-wrapper"> <div class="layer"></div> <button class="main-button fa fa-rocket"> <div class="ripple"></div> </button> </div> <!-- CONTENT INSIDE --> <div class="layered-content"> <button class="close-button fa fa-times"></button> <div class="content"> </div> </div> </main> <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='https://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js'></script> <script >(function() { 'use strict'; var $mainButton = $(".main-button"), $closeButton = $(".close-button"), $buttonWrapper = $(".button-wrapper"), $ripple = $(".ripple"), $layer = $(".layered-content"); $mainButton.on("click", function() { $ripple.addClass("rippling"); $buttonWrapper.addClass("clicked").delay(1500).queue(function() { $layer.addClass("active"); }); }); $closeButton.on("click", function() { $buttonWrapper.removeClass("clicked"); $ripple.removeClass("rippling"); $layer.removeClass("active"); }); })(); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: