<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/davidkpiano/pen/NGYjZv?limit=all&page=42&q=mobile" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);
html {
font-size: 2vh;
}
.exp-header, .exp-footer, .exp-main, .exp-location, .exp-details, .exp-card, .exp-card.-info > *, .exp-image, .exp-image > img, .exp-facts, .exp-facts > .exp-dots, .exp-gallery > img {
-webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#explore {
height: 96vh;
width: 54vh;
background: -webkit-linear-gradient(#7d8393, #414757);
background: linear-gradient(#7d8393, #414757);
overflow: hidden;
box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.4);
}
@-webkit-keyframes inactive-location-top {
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes inactive-location-top {
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
[id^="golden"]:target ~ #explore .exp-location:not([data-location="golden"]) {
-webkit-transform: translateY(-24vh);
transform: translateY(-24vh);
opacity: 0;
z-index: -1;
}
[id^="golden"]:target ~ #explore .exp-location:not([data-location="golden"]) *, [id^="golden"]:target ~ #explore .exp-location:not([data-location="golden"]) * > * {
-webkit-transition-delay: 5s !important;
transition-delay: 5s !important;
}
[id^="alamo"]:target ~ #explore .exp-location:not([data-location="alamo"]) {
-webkit-transform: translateY(24vh);
transform: translateY(24vh);
opacity: 0;
z-index: -1;
}
[id^="alamo"]:target ~ #explore .exp-location:not([data-location="alamo"]) *, [id^="alamo"]:target ~ #explore .exp-location:not([data-location="alamo"]) * > * {
-webkit-transition-delay: 5s !important;
transition-delay: 5s !important;
}
.route {
display: none;
}
.route:target ~ #explore {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.route:target ~ #explore .exp-header {
-webkit-transform: translateY(-120%);
transform: translateY(-120%);
}
.route:target ~ #explore .exp-footer {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.route:target ~ #explore .exp-main {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.route:target ~ #explore .exp-location {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.route:target ~ #explore .exp-location > .exp-image {
-webkit-transform: scale(1);
transform: scale(1);
pointer-events: auto;
}
.route:target ~ #explore .exp-location > .exp-details {
opacity: 1;
-webkit-transform: translateX(0) translateY(32.4vh);
transform: translateX(0) translateY(32.4vh);
}
.route:target ~ #explore .exp-location .exp-card.-title {
-webkit-transform: scale(1);
transform: scale(1);
pointer-events: none;
cursor: default;
}
.route:target ~ #explore .exp-location .exp-card.-info {
-webkit-transform: translateX(27vh);
transform: translateX(27vh);
-webkit-transition-delay: 0.125s;
transition-delay: 0.125s;
}
.route:target ~ #explore .exp-location .exp-card.-info > * {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.route:target ~ #explore .exp-location > .exp-facts {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.route:target ~ #explore .exp-location .exp-dots {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
[id*="explore-details"]:target ~ #explore .exp-location .exp-gallery > img {
-webkit-transition-delay: 0;
transition-delay: 0;
}
#golden-explore-gallery:target ~ #explore .exp-location > .exp-image {
-webkit-transform: translateY(32.4vh) scaleY(1.5);
transform: translateY(32.4vh) scaleY(1.5);
}
#golden-explore-gallery:target ~ #explore .exp-location > .exp-image > img {
-webkit-transform: scaleY(0.75);
transform: scaleY(0.75);
}
#golden-explore-gallery:target ~ #explore .exp-location > .exp-image, #golden-explore-gallery:target ~ #explore .exp-location > .exp-image > img {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-transition-duration: 0.75s;
transition-duration: 0.75s;
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-card.-title {
-webkit-animation: gallery-title 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) both;
animation: gallery-title 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-card.-info {
opacity: 0;
-webkit-transform: translateY(3rem) translateX(100%);
transform: translateY(3rem) translateX(100%);
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-facts {
opacity: 0;
-webkit-transform: translateY(3rem);
transform: translateY(3rem);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-gallery:hover > img {
-webkit-transition-delay: 0s !important;
transition-delay: 0s !important;
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-gallery > img {
opacity: 0.4;
-webkit-transform: translateY(0);
transform: translateY(0);
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-gallery > img:nth-child(1) {
-webkit-transition-delay: 1.125s;
transition-delay: 1.125s;
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-gallery > img:nth-child(2) {
-webkit-transition-delay: 1.25s;
transition-delay: 1.25s;
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-gallery > img:nth-child(3) {
-webkit-transition-delay: 1.375s;
transition-delay: 1.375s;
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-gallery > img:nth-child(4) {
-webkit-transition-delay: 1.5s;
transition-delay: 1.5s;
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-gallery > img.-active, #golden-explore-gallery:target ~ #explore .exp-location .exp-gallery > img:hover {
opacity: 1;
}
#golden-explore-gallery:target ~ #explore .exp-location .exp-gallery > img:hover {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
@-webkit-keyframes gallery-title {
33% {
opacity: 0;
-webkit-transform: translateY(3rem);
transform: translateY(3rem);
}
66% {
animation-timing-funtion: step-end;
background-color: transparent;
}
67% {
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
background-color: transparent;
-webkit-transform: translateY(-59.4vh);
transform: translateY(-59.4vh);
opacity: 0;
}
100% {
opacity: 1;
background-color: transparent;
-webkit-transform: translateY(-32.4vh);
transform: translateY(-32.4vh);
}
}
@keyframes gallery-title {
33% {
opacity: 0;
-webkit-transform: translateY(3rem);
transform: translateY(3rem);
}
66% {
animation-timing-funtion: step-end;
background-color: transparent;
}
67% {
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
background-color: transparent;
-webkit-transform: translateY(-59.4vh);
transform: translateY(-59.4vh);
opacity: 0;
}
100% {
opacity: 1;
background-color: transparent;
-webkit-transform: translateY(-32.4vh);
transform: translateY(-32.4vh);
}
}
.exp-header, .exp-footer {
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
height: 9vh;
z-index: 2;
font-size: 120%;
color: white;
font-weight: 700;
}
.exp-header {
background-color: #5d6373;
position: absolute;
width: 100%;
top: 0;
left: 0;
line-height: 9vh;
padding-left: 1.5rem;
}
.exp-footer {
width: 100%;
padding: 0 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.exp-dots {
-ms-flex-preferred-size: 5rem;
flex-basis: 5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 9vh;
}
.exp-dot {
height: 1rem;
width: 1rem;
border-radius: 50%;
border-style: solid;
border-width: 0.25rem;
border-color: rgba(255, 255, 255, 0.3);
}
.exp-dot.-active {
background-color: white;
border-color: white;
}
.exp-menu {
position: absolute;
top: 0;
right: 0;
height: 9vh;
width: 9vh;
background-color: #454b5b;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4);
}
.exp-menu:before {
content: '';
width: 1.3rem;
height: 0.25vh;
position: absolute;
background-color: white;
top: calc(9vh / 2 - 0.5rem);
left: calc(9vh / 2 - 0.75rem);
box-shadow: 0.25rem 0.5rem 0 white, 0 1rem 0 white;
}
.exp-footer {
background-color: #252a37;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.exp-main {
height: calc(100% - 18vh);
-webkit-transform: translateY(9vh);
transform: translateY(9vh);
position: absolute;
width: 100%;
}
.exp-location {
position: absolute;
left: 0;
top: 0;
height: 96vh;
width: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.exp-location > .exp-details {
opacity: 0.8;
}
.exp-location > .exp-image {
pointer-events: none;
-webkit-transform: translateY(calc(3.3vh));
transform: translateY(calc(3.3vh));
}
.exp-location:nth-child(1) {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.exp-location:nth-child(1) > .exp-details {
-webkit-transform: translateY(calc(6vh)) translateX(0);
transform: translateY(calc(6vh)) translateX(0);
}
.exp-location:nth-child(1) .exp-card.-title {
background-color: #7b71be;
-webkit-transform-origin: left 50%;
transform-origin: left 50%;
}
.exp-location:nth-child(2) {
-webkit-transform: scale(0.9) translateY(39vh);
transform: scale(0.9) translateY(39vh);
}
.exp-location:nth-child(2) > .exp-details {
-webkit-transform: translateY(calc(6vh)) translateX(calc(27vh));
transform: translateY(calc(6vh)) translateX(calc(27vh));
}
.exp-location:nth-child(2) .exp-card.-title {
background-color: #39A0ED;
-webkit-transform-origin: right 50%;
transform-origin: right 50%;
}
.exp-details {
position: absolute;
top: 0;
left: 0;
}
.exp-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 27vh;
height: 27vh;
padding: 2rem;
text-decoration: none;
}
.exp-card.-title {
z-index: 2;
color: white;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.exp-card.-info {
background-color: white;
}
.exp-card.-info > * {
-webkit-transform: translateY(1rem);
transform: translateY(1rem);
opacity: 0;
}
.exp-card.-info > .subheading {
color: #999;
}
.exp-image {
width: 100%;
height: 32.4vh;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.exp-image > img {
width: 100%;
}
.exp-facts {
position: absolute;
left: 0;
padding: 2rem;
height: calc(96vh - 32.4vh - 27vh);
top: 59.4vh;
opacity: 0;
-webkit-transform: translateY(1rem);
transform: translateY(1rem);
color: white;
background-color: transparent;
}
.exp-facts > .heading {
font-size: 100%;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.exp-facts > .paragraph {
font-size: 120%;
font-weight: 300;
line-height: 1.5;
}
.exp-facts > .exp-dots {
width: 5rem;
position: absolute;
bottom: 0;
left: calc(50% - 2.5rem);
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
.exp-gallery {
height: auto;
width: 54vh;
white-space: nowrap;
overflow: hidden;
padding: 2rem 1rem;
position: absolute;
bottom: 0;
left: 0;
}
.exp-gallery > img {
height: 13.5vh;
width: 13.5vh;
display: inline-block;
margin-left: 1rem;
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}
.heading {
font-size: 200%;
font-weight: 400;
}
.heading:first-child {
margin-top: 0;
}
.heading.-h2 {
margin-bottom: 0.5rem;
}
.subheading {
font-size: 100%;
font-weight: 300;
}
.route:target ~ #explore .exp-location > .exp-image[href]:before, .exp-card.-title:before {
content: '';
width: 3rem;
height: 3rem;
position: absolute;
top: 1rem;
right: 1rem;
border: 0.5rem solid white;
border-radius: 50%;
z-index: 2;
opacity: 0;
-webkit-animation: pulse 1.5s 3s infinite;
animation: pulse 1.5s 3s infinite;
pointer-events: none;
}
.route:target ~ #explore .exp-location .exp-card.-title, #golden-explore-gallery:target ~ #explore .exp-location > .exp-image {
cursor: default;
}
.route:target ~ #explore .exp-location .exp-card.-title:before, #golden-explore-gallery:target ~ #explore .exp-location > .exp-image:before {
display: none;
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50%, to {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0;
}
}
@keyframes pulse {
from {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50%, to {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0;
}
}
.meta {
-ms-flex-preferred-size: calc(80% - 54vh);
flex-basis: calc(80% - 54vh);
font-size: 1.2rem;
font-weight: 300;
}
.meta p, .meta a {
color: rgba(255, 255, 255, 0.7);
}
.meta h1 {
font-size: 3rem;
line-height: 1.2;
font-weight: 300;
color: white;
}
.meta p {
line-height: 1.4;
}
.meta a:hover {
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 750px) {
.meta {
display: none;
}
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 calc(50% - 450px) !important;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;
justify-content: space-around;
font-family: Lato, sans-serif;
background: -webkit-linear-gradient(#98a2ad, #88909b);
background: linear-gradient(#98a2ad, #88909b);
overflow: hidden;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
*, *:before, *:after {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
position: relative;
}
</style></head><body>
<div class="route" id="golden-explore-details"></div>
<div class="route" id="golden-explore-gallery"></div>
<div class="route" id="alamo-explore-details"></div>
<div id="explore">
<header class="exp-header">
<span>Top Attractions</span>
<div class="exp-menu"></div>
</header>
<main class="exp-main">
<div class="exp-location" data-location="alamo">
<div class="exp-image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/181794/Screen_Shot_2015-10-25_at_10.51.48_PM.png" alt="" />
</div>
<div class="exp-details">
<a href="#alamo-explore-details" class="exp-card -title">
<h1 class="heading -h1">Alamo Square</h1>
<div class="subheading">San Francisco, CA</div>
</a>
<div class="exp-card -info">
<h1 class="heading -h2">1984</h1>
<div class="subheading">Created</div>
<h1 class="heading -h2">5,617</h1>
<div class="subheading">Population</div>
</div>
</div>
<div class="exp-facts">
<div class="heading">Facts</div>
<p class="paragraph">The Alamo Square neighborhood is characterized by Victorian architecture that was left largely untouched by the urban renewal projects in other parts of the Western Addition.</p>
<div class="exp-dots">
<div class="exp-dot -active"></div>
<div class="exp-dot"></div>
<div class="exp-dot"></div>
</div>
</div>
</div>
<div class="exp-location" data-location="golden">
<a href="#golden-explore-gallery" class="exp-image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/181794/Screen_Shot_2015-10-25_at_4.26.33_PM.png" alt="" />
</a>
<div class="exp-details">
<a href="#golden-explore-details" class="exp-card -title">
<h1 class="heading -h1">Golden Gate</h1>
<div class="subheading">San Francisco, CA</div>
</a>
<div class="exp-card -info">
<h1 class="heading -h2">1937</h1>
<div class="subheading">Opened</div>
<h1 class="heading -h2">8,980'</h1>
<div class="subheading">Total Length</div>
</div>
</div>
<div class="exp-facts">
<div class="heading">Facts</div>
<p class="paragraph">Business was so good, the city constructed the Oakland Bay Bridge and the Golden Gate Bridge during the Great Depression.</p>
<div class="exp-dots">
<div class="exp-dot -active"></div>
<div class="exp-dot"></div>
<div class="exp-dot"></div>
</div>
</div>
<div class="exp-gallery">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/181794/Screen_Shot_2015-10-25_at_10.03.34_PM.png" alt="" class="-active" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/181794/Screen_Shot_2015-10-25_at_10.04.25_PM.png" alt="" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/181794/Screen_Shot_2015-10-25_at_10.05.30_PM.png" alt="" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/181794/Screen_Shot_2015-10-25_at_10.04.00_PM.png" alt="" />
</div>
</div>
</main>
<footer class="exp-footer">
<div>All Cities</div>
<div class="exp-dots">
<div class="exp-dot -active"></div>
<div class="exp-dot"></div>
<div class="exp-dot"></div>
</div>
<div>Next</div>
</footer>
</div>
<div class="meta">
<h1>CSS-only Exploration App Concept</h1>
<p>
Dribbble Rework<br />
Original Shot by <a href="https://dribbble.com/shots/2311820-Exploring" target="_blank">Dejan Markovic</a>
</p>
<p>
Click the pulsating tiles and photo to see the effect.<br>
You can also go <strong>back</strong> in your browser to navigate between scenes.
</p>
<p>
Works best in Chrome and Safari. Works <em>okay</em> in Firefox. <br>
It also works on mobile devices.
</p>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >// ¯\_(ツ)_/¯ //
// @davidkpiano //
//# sourceURL=pen.js
</script>
</body></html>
