<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 ----------> <section class="container"> <div class="section first"> <div class="cont_title"> <!--<div class="letter-container"> <p class="lettering">Alaska, USA</p> </div>--> <h1>kenai<br>fjords</h1> <h3>National Park</h3> </div> <div class="cont_desc"> <p>Rappel into a crevasse, kayak through icebergs, and watch a glacier recede.</p> </div> </div> <div class="section"> <div class="cont_title"> <h1>Hawai'i<br>Volcanoes</h1> <h3>National Park</h3> </div> <div class="cont_desc"> <p>Rappel into a crevasse, kayak through icebergs, and watch a glacier recede.</p> </div> </div> <div class="section"> <div class="cont_title"> <h1>Carlsbad<br>Caverns</h1> <h3>National Park</h3> </div> <div class="cont_desc"> <p>Rappel into a crevasse, kayak through icebergs, and watch a glacier recede.</p> </div> </div> <div class="section"> <div class="cont_title"> <h1>Bryce<br>Canyon</h1> <h3>National Park</h3> </div> <div class="cont_desc"> <p>Rappel into a crevasse, kayak through icebergs, and watch a glacier recede.</p> </div> </div> <div class="section"> <div class="cont_title"> <h1>Dry<br>Tortugas</h1> <h3>National Park</h3> </div> <div class="cont_desc"> <p>Rappel into a crevasse, kayak through icebergs, and watch a glacier recede.</p> </div> </div> </section>

@import "https://fonts.googleapis.com/css?family=Economica"; html, body { margin: 0; max-width: 100%; height: 100%; } .container { 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; height: 100vh; width: 100vw; } .container:hover > .section { -webkit-filter: brightness(22%); filter: brightness(22%); } .container:hover > .section:hover { -webkit-filter: brightness(100%); filter: brightness(100%); } .container .section { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; height: 100%; -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; box-sizing: border-box; text-align: center; -ms-flex: 1; flex: 1; } .container .section .cont_title { position: relative; margin: auto; width: 100%; height: auto; text-align: center; margin-top: 37vh; /*.letter-container{ position: relative; width: 2vw; height: 100px; position: relative; margin: auto; .lettering{ transition: all 0.3s; color: white; span{ height: 10vw; font-family: 'Economica', sans-serif; font-size: 1.6vw; text-shadow: 1px 2px 5px rgba(0,0,0,0.5); position: absolute; width: 15px; left: 0; top: 0; transform-origin: bottom center; } @include rotated-text(11); } }*/ } .container .section .cont_title h1 { text-transform: uppercase; color: white; font-family: 'Economica', sans-serif; text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); font-size: 3.5vw; margin: 0; -webkit-transition: font-size 0.3s; transition: font-size 0.3s; vertical-align: middle; } .container .section .cont_title h3 { text-transform: uppercase; font-family: 'Economica', sans-serif; font-size: 1.3vw; -webkit-transition: all 0.3s; transition: all 0.3s; color: white; letter-spacing: 3px; text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); } .container .section .cont_desc { position: relative; display: block; text-align: center; width: 12vw; height: auto; margin: auto; opacity: 0; -webkit-transition: opacity 0.8s, padding-top 0.9s, -webkit-transform 0.7s; transition: opacity 0.8s, padding-top 0.9s, -webkit-transform 0.7s; transition: opacity 0.8s, transform 0.7s, padding-top 0.9s; transition: opacity 0.8s, transform 0.7s, padding-top 0.9s, -webkit-transform 0.7s; padding-top: 6vh; -webkit-transform: scale(1); transform: scale(1); } .container .section .cont_desc p { margin: 0; font-family: 'Economica', sans-serif; color: white; font-size: 16px; } .container .section:hover { -webkit-box-flex: 1.8; -ms-flex-positive: 1.8; flex-grow: 1.8; -webkit-transition: -webkit-box-flex 0.2s; transition: -webkit-box-flex 0.2s; transition: flex 0.2s; transition: flex 0.2s, -webkit-box-flex 0.2s, -ms-flex 0.2s; } .container .section:hover > .cont_title h1 { font-size: 5.3vw; -webkit-transition: font-size 0.4s; transition: font-size 0.4s; } .container .section:hover > .cont_title h3 { font-size: 1.6vw; -webkit-transition: all 0.4s; transition: all 0.4s; } .container .section:hover > .cont_desc { opacity: 1; padding-top: 2vh; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: opacity 0.7s, padding-top 0.5s, -webkit-transform 0.1s; transition: opacity 0.7s, padding-top 0.5s, -webkit-transform 0.1s; transition: opacity 0.7s, padding-top 0.5s, transform 0.1s; transition: opacity 0.7s, padding-top 0.5s, transform 0.1s, -webkit-transform 0.1s; -webkit-transition-delay: 0s, 0.1s, 0s; transition-delay: 0s, 0.1s, 0s; } .container .section:nth-child(1) { background: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Kenai-desktop.jpg") center; } .container .section:nth-child(2) { background: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Hawaii-desktop.jpg") center; } .container .section:nth-child(3) { background: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/de0b954d-ca76-41d3-ac3a-900c6bc25139.jpg") center; } .container .section:nth-child(4) { background: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Bryce-desktop.jpg") center; } .container .section:nth-child(5) { background: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Tortugas-desktop.jpg") center; }