<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 ----------> <div class="container"> <div class="hover panel" onmouseover="javascript:this.className += ' flip';" onmouseout="javascript:this.className = 'hover panel';"> <div class="front"> <div class="frontTitle"> Idaho Science and Aerospace Scholars </div> <div class="frontLogo isas"> </div> <div class="frontLocation"> NASA Ames </div> </div> <div class="back"> <div class="backTitle">ISAS Graduate</div> <div class="backParagraph"> Idaho Science and Aerospace is an online class that invites the top 20% of students to a free trip to Boise State University and NASA Ames. During this time I spent personal time with two astronauts, and multiple mission controllers from the Mars landing. I designed my teams mission patch (front). </div> <div class="backGoto"> <a href="http://nicholas.dizin.x10.bz" target="_blank" title="Academic Portfolio">Academic Portfolio →</a> </div> </div> </div> <div class="hover panel" onmouseover="javascript:this.className += ' flip';" onmouseout="javascript:this.className = 'hover panel';"> <div class="front"> <div class="frontTitle"> Boise Digital Marketing </div> <div class="frontLogo boisedigital"> </div> <div class="frontLocation"> Boise, Idaho </div> </div> <div class="back"> <div class="backTitle">Boise Digital Marketing</div> <div class="backParagraph"> Boise Digital Marketing was founded in 2015 under a partnership between Koby & Nicholas. We're small agency doing big agency work. </div> <div class="backGoto"> <a href="http://boisedigitalmarketing.com" target="_blank" title="Boise Digital Marketing">Boise Digital →</a> </div> </div> </div> <div class="hover panel" onmouseover="javascript:this.className += ' flip';" onmouseout="javascript:this.className = 'hover panel';"> <div class="front"> <div class="frontTitle"> Cinematography </div> <div class="frontLogo dissolve"> </div> <div class="frontLocation"> Dissolve.com </div> </div> <div class="back"> <div class="backTitle"> Cinematography</div> <div class="backParagraph"> I am an independent stock footage contributor on Dissolve.com. I use a GoPro Hero 3+, Canon EOS 70D and DJI Phantom 3 with Adobe Premiere to create the highest quality video and timeplapses I can. </div> <div class="backGoto"> <a href="http://dissolve.com/products?media_type=video&producer=Nicholas+Butler" target="_blank" title="Stock Video Collection (Not very comprehensive atm)">Stock Collection →</a> </div> </div> </div> </div>

.container { width:750px; margin:auto; } .panel .pad { padding: 0 15px; } .panel.flip .action { display: none; } .panel { width: 200px; height: 300px; margin: 20px; position: relative; display:inline-block; -webkit-perspective: 600px; -moz-perspective: 600px; } .panel .front { z-index: 900; width: inherit; height: inherit; background: #fff; -moz-box-shadow: 0 1px 15px rgba(0,0,0,0.1); -webkit-box-shadow: 0 1px 15px rgba(0,0,0,0.1); box-shadow: 0 1px 15px rgba(0,0,0,0.1); -webkit-transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-transform: rotateX(0deg) rotateY(0deg); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; -o-transform: rotateX(0deg) rotateY(0deg); -o-transform-style: preserve-3d; -o-backface-visibility: hidden; -ms-transform: rotateX(0deg) rotateY(0deg); -ms-transform-style: preserve-3d; -ms-backface-visibility: hidden; transform: rotateX(0deg) rotateY(0deg); transform-style: preserve-3d; backface-visibility: hidden; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel.flip .front { z-index: 900; background: #fff; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2); -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2); box-shadow: 0 15px 50px rgba(0,0,0,0.2); } .panel .back { position: absolute; top: 0; left: 0; z-index: 800; width: inherit; height: inherit; background: #fff; border:1px solid #000; -webkit-transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-transform: rotateY(-180deg); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; -o-transform: rotateY(-180deg); -o-transform-style: preserve-3d; -o-backface-visibility: hidden; -ms-transform: rotateY(-180deg); -ms-transform-style: preserve-3d; -ms-backface-visibility: hidden; transform: rotateY(-180deg); transform-style: preserve-3d; backface-visibility: hidden; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel.flip .back { z-index: 1000; background: #fff; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); -ms-transform: rotateX(0deg) rotateY(0deg); -o-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); box-shadow: 0 15px 50px rgba(0,0,0,0.2); -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2); -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2); } .frontTitle { padding-top:5px; text-align:center; font-family:'latoregular',arial; font-size:18px; color:#000; height:45px; } .frontLogo { width:100%; height:200px; background-repeat:no-repeat; background-position:center center; } .isas { background-image:url('http://dizin.x10.bz/codepen/wgaFq/isas.png'); background-size:150px 150px; } .boisedigital { background-image:url('http://dizin.x10.bz/codepen/wgaFq/logo_dark.png'); background-size:85% auto; background-position:center center; } .dissolve { background-image:url('http://portfolio.dizin.x10.bz/images/dissolve.png'); background-size:125px 125px; } .frontLocation { padding-top:10px; text-align:center; color:#aaa; font-family:'latoregular',arial; font-size:18px; } .backTitle { padding:10px; color:#000; font-family:'latohairline',arial; font-size:16px; font-weight:bold; } .backParagraph { padding:10px; padding-top:0; color:#000; font-family:'latoregular',arial; font-size:14px; } .backGoto { padding:10px; padding-top:0; color:#06f; font-family:'latoregular',arial; font-size:14px; } .backGoto a { text-decoration:none; color:#06f; -webkit-transition:0.1s all linear; -moz-transition:0.1s all linear; -o-transition:0.1s all linear; transition:0.1s all linear; } .backGoto a:hover { text-decoration:underline; padding-left:15px; }