<div class="container">
<section class="nautilus">
<div style="background: url('http://d8559fa83407ca590c9c-26c3b154822345d9dde0204930c49e9c.r68.cf1.rackcdn.com/2860546_a1e73ae4_m.jpeg') center center / cover no-repeat ">
</div>
<div style="background: url('http://www.youthedesigner.com/wp-content/uploads/2013/02/37.jpg') center center / cover no-repeat "></div>
<div style="background: url('http://i.kinja-img.com/gawker-media/image/upload/s--vl1wPe4w--/c_scale,fl_progressive,q_80,w_800/18ioy0rbeb5dxjpg.jpg') center center / cover no-repeat "></div>
<div style="background: url('http://worksdesigngroup.com/wp-content/uploads/2014/01/105855_2_600.jpeg') center center / cover no-repeat "></div>
<div style="background: url('https://founterior.com/wp-content/uploads/2014/02/lamp-product-design-Port-by-Alexander-Taylor.jpg') center center / cover no-repeat "></div>
<div style="background: url('https://hovercraftdoggy.files.wordpress.com/2012/04/tumblr_lwbkwwuxjo1qdixcio2_1280.jpg') center center / cover no-repeat "></div>
<div style="background: url('https://assets.yellowtrace.com.au/wp-content/uploads/2012/02/yellowtrace_Hanging-Clock-by-Lucas-Peet-Design_01.jpg') center center / cover no-repeat "></div>
</section>
<section class="back">
<div class="column">
<h1>Nautilus Slideshow</h1>
<h2>Click Here</h2>
</div>
</section>
</div>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: black;
font-family: roboto;
}
.container {
display: flex;
flex-direction: row;
section.forward {
flex-grow: 1;
cursor: pointer;
}
section.back {
flex-grow: 1;
cursor: pointer;
background: #52F9D4;
background: #eeeeee;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.nautilus{
background: #ddd;
position: relative;
min-width: 161.8034vh;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}
.nautilus > div{
position: absolute;
z-index: 900;
transition: all 400ms ease-out;
animation: genie 400ms forwards ease-out;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
width:9.016986vh;
height: 5.57280vh;
left: 114.59055442vh;
top: 70.820377901vh;
opacity: 0;
&:nth-child(1){
opacity: 1;
width: 100vh;
height: 100vh;
top: 0;
left: 0;
background-color: #52F9D4;
z-index: 999;
}
&:nth-child(2){
// border-bottom: 1px solid white;
opacity: 1;
width: 61.8034vh;
height: 61.8034vh;
top: 0vh;
left: 100vh;
background-color: #51E3C2;
z-index: 998;
}
&:nth-child(3){
// border-left: 1px solid white;
opacity: 1;
width: 38.19783669vh;
height: 38.19783669vh;
top: 61.8034vh;
left: 123.60615331vh;
background-color: #53C7AD;
z-index: 997;
}
&:nth-child(4){
// border-top: 1px solid white;
opacity: 1;
width: 23.60778717vh;
height: 23.60778717vh;
top: 76.39221283vh;
left: 100vh;
background-color: #51AF9A;
z-index: 996;
}
&:nth-child(5){
// border-right: 1px solid white;
opacity: 1;
height: 14.59055442vh;
width: 14.59055442vh;
top: 61.8034vh;
left: 100vh;
background: #4D9686;
z-index: 995;
}
&:nth-child(6){
// border-bottom: 1px solid white;
opacity: 1;
height: 9.016986vh;
width: 9.016986vh;
top: 61.8034vh;
left: 114.59055442vh;
background: #498376;
z-index: 994;
}
&:nth-child(7){
opacity: 1;
width:9.016986vh;
height: 5.57280vh;
left: 114.59055442vh;
top: 70.820377901vh;
z-index: 993;
}
}
@keyframes genie {
0% { opacity: 0; }
100% { opacity: 1; }
}
button {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 200px;
}
.column {
padding: 1rem;
color: #333;
h1, h2, h3, h4 {
font-weight: 300;
}
h1 {
font-size: 48px;
}
h2 {
font-size: 24px;
}
}
View Compiled
var interval = 500;
var slide;
$('section.back').click(function(){
var slide = $('.nautilus div:last-child').remove();
$('.nautilus').prepend(slide);
});
This Pen doesn't use any external CSS resources.