<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/EricPorter/pen/yXKGoX?depth=everything&order=popularity&page=15&q=pack&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Ubuntu|Ropa+Sans|PT+Sans|Josefin+Sans|Josefin+Slab|Vollkorn|Arvo|Handlee|Nothing+You+Could+Do|Pompiere|Crimson+Text|Coda|Muli' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">/* The Gradients ---------------------------------------- */
.block-1 {
background: -webkit-linear-gradient(135deg, #fddf50 20%, #65ca03 80%);
background: -webkit-linear-gradient(315deg, #fddf50 20%, #65ca03 80%);
background: linear-gradient(135deg, #fddf50 20%, #65ca03 80%);
}
.block-2 {
background: -webkit-radial-gradient(#111111, #000000);
background: radial-gradient(#111111, #000000);
}
.block-3 {
background: -webkit-radial-gradient(#3c3b52, #252233);
background: radial-gradient(#3c3b52, #252233);
}
.block-4 {
background: -webkit-linear-gradient(-90deg, #4567b2 20%, #8ab9ff 80%);
background: -webkit-linear-gradient(right, #4567b2 20%, #8ab9ff 80%);
background: linear-gradient(-90deg, #4567b2 20%, #8ab9ff 80%);
}
.block-5 {
background: -webkit-linear-gradient(155deg, #72abff 0%, #2c4784 90%);
background: -webkit-linear-gradient(295deg, #72abff 0%, #2c4784 90%);
background: linear-gradient(155deg, #72abff 0%, #2c4784 90%);
}
.block-6 {
background: -webkit-linear-gradient(-60deg, #8ab9ff 50%, #4567b2 50%);
background: -webkit-linear-gradient(150deg, #8ab9ff 50%, #4567b2 50%);
background: linear-gradient(-60deg, #8ab9ff 50%, #4567b2 50%);
}
.block-7 {
background: -webkit-linear-gradient(135deg, #ffa000 20%, #ff5000 80%);
background: -webkit-linear-gradient(315deg, #ffa000 20%, #ff5000 80%);
background: linear-gradient(135deg, #ffa000 20%, #ff5000 80%);
}
.block-8 {
background: -webkit-linear-gradient(-45deg, #141e31 50%, #233a54 50%);
background: -webkit-linear-gradient(135deg, #141e31 50%, #233a54 50%);
background: linear-gradient(-45deg, #141e31 50%, #233a54 50%);
}
.block-9 {
background: -webkit-linear-gradient(right, #243B55, #141E30);
background: linear-gradient(to left, #243B55, #141E30);
}
.block-10 {
background: -webkit-linear-gradient(180deg, #243B55 50%, #141E30 50%);
background: -webkit-linear-gradient(top, #243B55 50%, #141E30 50%);
background: linear-gradient(180deg, #243B55 50%, #141E30 50%);
}
.block-11 {
background: -webkit-linear-gradient(120deg, #fbef97 20%, #ffe41d 80%);
background: -webkit-linear-gradient(330deg, #fbef97 20%, #ffe41d 80%);
background: linear-gradient(120deg, #fbef97 20%, #ffe41d 80%);
}
.block-12 {
background: -webkit-linear-gradient(right, #232526, #414345);
background: linear-gradient(to left, #232526, #414345);
}
.block-13 {
background: -webkit-linear-gradient(right, #56ab2f, #a8e063);
background: linear-gradient(to left, #56ab2f, #a8e063);
}
.block-14 {
background: -webkit-linear-gradient(-45deg, #57ac30 50%, #a6df62 50%);
background: -webkit-linear-gradient(135deg, #57ac30 50%, #a6df62 50%);
background: linear-gradient(-45deg, #57ac30 50%, #a6df62 50%);
}
.block-15 {
background: -webkit-linear-gradient(-45deg, #ff5000 50%, #ffa000 50%);
background: -webkit-linear-gradient(135deg, #ff5000 50%, #ffa000 50%);
background: linear-gradient(-45deg, #ff5000 50%, #ffa000 50%);
}
.block-16 {
background: -webkit-radial-gradient(#13941d, #1d512a);
background: radial-gradient(#13941d, #1d512a);
}
.block-17 {
background: -webkit-linear-gradient(left, #b6eae1 10%, #D2FBAD 90%);
background: linear-gradient(90deg, #b6eae1 10%, #D2FBAD 90%);
}
.block-18 {
background: -webkit-linear-gradient(-90deg, #949494 10%, #efefef 90%);
background: -webkit-linear-gradient(right, #949494 10%, #efefef 90%);
background: linear-gradient(-90deg, #949494 10%, #efefef 90%);
}
.block-19 {
background: -webkit-linear-gradient(-90deg, #000000 50%, #eee 50%);
background: -webkit-linear-gradient(right, #000000 50%, #eee 50%);
background: linear-gradient(-90deg, #000000 50%, #eee 50%);
}
.block-20 {
background: -webkit-linear-gradient(-45deg, #000 50%, #eee 50%);
background: -webkit-linear-gradient(135deg, #000 50%, #eee 50%);
background: linear-gradient(-45deg, #000 50%, #eee 50%);
}
.block-21 {
background: -webkit-linear-gradient(0deg, #949494 10%, #efefef 90%);
background: -webkit-linear-gradient(bottom, #949494 10%, #efefef 90%);
background: linear-gradient(0deg, #949494 10%, #efefef 90%);
}
.block-22 {
background: -webkit-linear-gradient(-45deg, #225e9e 0%, #712c69 100%);
background: -webkit-linear-gradient(135deg, #225e9e 0%, #712c69 100%);
background: linear-gradient(-45deg, #225e9e 0%, #712c69 100%);
}
.block-23 {
background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #9ab1c7 0%, #1a242f 100%);
background-image: radial-gradient(ellipse farthest-corner at center top, #9ab1c7 0%, #1a242f 100%);
}
.block-24 {
background: -webkit-linear-gradient(-45deg, #89ABE3 0%, #F2DDDE 100%);
background: -webkit-linear-gradient(135deg, #89ABE3 0%, #F2DDDE 100%);
background: linear-gradient(-45deg, #89ABE3 0%, #F2DDDE 100%);
}
.block-25 {
background-image: -webkit-linear-gradient(50deg, #abecd6 0%, #fbed96 100%);
background-image: -webkit-linear-gradient(40deg, #abecd6 0%, #fbed96 100%);
background-image: linear-gradient(50deg, #abecd6 0%, #fbed96 100%);
}
.block-26 {
background-image: -webkit-linear-gradient(-60deg, #16a085 0%, #f4d03f 100%);
background-image: -webkit-linear-gradient(150deg, #16a085 0%, #f4d03f 100%);
background-image: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%);
}
.block-27 {
background-image: -webkit-linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);
background-image: -webkit-linear-gradient(bottom, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);
background-image: linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);
}
.block-28 {
background-image: -webkit-linear-gradient(bottom, #df89b5 0%, #bfd9fe 100%);
background-image: linear-gradient(to top, #df89b5 0%, #bfd9fe 100%);
background-image: linear-gradient(to top, #df89b5 0%, #bfd9fe 100%);
}
.block-29 {
background: -webkit-radial-gradient(#DC3D1F, #85210A);
background: -webkit-radial-gradient(#dc3d1f, #85210a);
background: radial-gradient(#dc3d1f, #85210a);
}
.block-30 {
background: -webkit-radial-gradient(#DB9561, #C55702);
background: -webkit-radial-gradient(#db9561, #c55702);
background: radial-gradient(#db9561, #c55702);
}
.block-31 {
background: -webkit-linear-gradient(right, #cc95c0 -25%, #dbd4b4, #7aa1d2 125%);
background: linear-gradient(to left, #cc95c0 -25%, #dbd4b4, #7aa1d2 125%);
}
/* Layout stuff ---------------------------------------- */
* {
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
background: #121212;
overflow-x: hidden;
}
.blocks {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 50px 0 100px;
}
.block {
-webkit-box-flex: 0;
-ms-flex: 0 0 350px;
flex: 0 0 350px;
height: 350px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: white;
text-shadow: 1px 1px 0 black;
margin: 15px;
border-radius: 6px;
cursor: pointer;
-webkit-transition: 500ms;
transition: 500ms;
}
.block.embiggen {
width: 100% !important;
height: 100% !important;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 0;
-webkit-animation: scaleUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.9) both;
animation: scaleUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.9) both;
}
#output {
position: fixed;
left: 0px;
color: #fff;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-weight: normal;
text-align: center;
bottom: 0px;
padding: 20px;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
z-index: -1;
}
#output.embiggen {
z-index: 1;
opacity: 1;
}
.click {
font-size: 1.2em;
color: rgba(255, 255, 255, 0.2);
position: absolute;
left: 20px;
top: -5px;
z-index: -1;
}
input {
position: absolute;
top: -100px;
}
label:after {
display: block;
position: fixed;
top: 15px;
right: 20px;
cursor: pointer;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #444;
font-size: 28px;
-webkit-transition: 400ms;
transition: 400ms;
}
label:hover:after {
color: #888;
}
.layout-1:after {
content: "\f009";
}
.layout-2:after {
content: "\f00a";
right: 55px;
}
.layout-3:after {
content: "";
top: 100px;
background: #444;
width: 28px;
height: 25px;
border-radius: 2px;
}
#grid:checked ~ .blocks .block {
-webkit-box-flex: 0;
-ms-flex: 0 1 350px;
flex: 0 1 350px;
height: 350px;
}
#list:checked ~ .blocks .block {
-webkit-box-flex: 0;
-ms-flex: 0 1 300px;
flex: 0 1 300px;
height: 80px;
}
@-webkit-keyframes scaleUp {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes scaleUp {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style></head><body>
<input type="radio" id="grid" name="layout" checked />
<label for="grid" class="layout-1"></label>
<input type="radio" id="list" name="layout" />
<label for="list" class="layout-2"></label>
<!-- Apologies for the out-of-order-ness.
Moved them around to group them better. -->
<div class="blocks">
<div class="block block-2">2</div>
<div class="block block-3">3</div>
<div class="block block-12">12</div>
<div class="block block-23">23</div>
<div class="block block-9">9</div>
<div class="block block-4">4</div>
<div class="block block-5">5</div>
<div class="block block-6">6</div>
<div class="block block-8">8</div>
<div class="block block-10">10</div>
<div class="block block-22">22</div>
<div class="block block-7">7</div>
<div class="block block-15">15</div>
<div class="block block-29">29</div>
<div class="block block-30">30</div>
<div class="block block-11">11</div>
<div class="block block-1">1</div>
<div class="block block-26">26</div>
<div class="block block-13">13</div>
<div class="block block-14">14</div>
<div class="block block-16">16</div>
<div class="block block-19">19</div>
<div class="block block-20">20</div>
<div class="block block-18">18</div>
<div class="block block-21">21</div>
<div class="block block-24">24</div>
<div class="block block-25">25</div>
<div class="block block-17">17</div>
<div class="block block-27">27</div>
<div class="block block-28">28</div>
<div class="block block-31">31</div>
</div>
<p class="click">Click to Embiggen</p>
<div id="output"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script >
$(document).ready(function() {
$(".block").click(function() {
var newElement=$(this).eq(0).clone(true).appendTo(".blocks");
newElement.toggleClass("embiggen");
newElement.click(function() {
$(this).animate({
top: '-1000px'
},200);
setTimeout(function() {
$('.block:last-of-type').remove();
}, 0);
});
$("#output").toggleClass("embiggen");
var elem = this;
function getTheStyle() {
var theCSSprop = window
.getComputedStyle(elem, null)
.getPropertyValue("background-image");
document.getElementById("output").innerHTML =
"YOUR BROWSER RENDERED THIS: " + theCSSprop + ";";
}
getTheStyle();
});
});
//# sourceURL=pen.js
</script>
</body></html>
