"Portfolio using Panels No JavaScript!"
Bootstrap 3.3.0 Snippet by closetwalrus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-image"> <div class="embed-responsive embed-responsive-16by9"> <iframe src="https://www.youtube.com/embed/ppbRfv_YUZA" frameborder="0" allowfullscreen></iframe> </div> </div> <input type="checkbox" id="toggle-4" checked class="panel-image-toggle"> <div class="panel-body"> <h4>Rocket Jump</h4> <p>This video contains a small portfolio of Rocket Jump's work over the year of 2016. Rocket Jump is a company that creates everything from TV shows, animations, live streams and tutorials. Some of their most popular work will be showcased on this site.</p> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> <div class="container" style="margin-top:10px;"> <div class="row form-group"> <div class="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-image"> <iframe width="560" height="315" src="https://www.youtube.com/embed/PXRX47L_3yE" frameborder="0" allowfullscreen></iframe> <label for="toggle-1"></label> </div> <div class="panel-body"> <h4>Rocket Jump</h4> <p>This video contains a small portfolio of Rocket Jump's work over the year of 2016. Rocket Jump is a company that creates everything from TV shows, animations, live streams and tutorials. Some of their most popular work will be showcased on this site.</p> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> <div class="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-image"> <iframe width="560" height="315" src="https://www.youtube.com/embed/1JqR3GVqib4" frameborder="0" allowfullscreen></iframe> </div> <input type="checkbox" id="toggle-4" checked class="panel-image-toggle"> <div class="panel-body"> <h4>Video Game Highschool</h4> <p>This is Rocket Jump's award winning online television series Video Game High School. This was one of their first major projects for the company, and it was an insane success. The first episode alone had over 15 million views on Youtube, and this does not count the views from their website. Carrying on, the episodes average more views than the past few seasons of Family Guy: A show that has been on the air successfully for many years.</p> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> <div class="row form-group"> <div class="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">You can even have a Panel Title</h3> </div> <div class="panel-image hide-panel-body"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52c470899a2e1_1.JPG" class="panel-image-preview" /> <label for="toggle-3"></label> </div> <input type="checkbox" id="toggle-3" class="panel-image-toggle"> <div class="panel-body"> <h4>Title of Image</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper et.</p> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> <p class="text-right"> <a href="http://bootsnipp.com/iframe/86PqZ" target="_blank">Best viewed full screen</a><br> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2F86PqZ" target="_blank"><small>HTML</small><sup>5</sup></a> </p> </div> </div>
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); .panel-image { position: relative; } .panel-image img.panel-image-preview { width: 100%; border-radius: 4px 4px 0px 0px; } .panel-image label { display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .panel-heading ~ .panel-image img.panel-image-preview { border-radius: 0px; } .panel-body { overflow: hidden; } .panel-image ~ input[type=checkbox] { position:absolute; top:- 30px; z-index: -1; } .panel-image ~ input[type=checkbox] ~ .panel-body { height: 0px; padding: 0px; } .panel-image ~ input[type=checkbox]:checked ~ .panel-body { height: auto; padding: 15px; } .panel-image ~ .panel-footer a { padding: 0px 10px; font-size: 1.3em; color: rgb(100, 100, 100); }

Related: See More


Questions / Comments: