Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
+New
Community
Tools
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Portfolio using Panels"
Bootstrap 3.0.3 Snippet by
mouse0270
3.0.3
jQuery
lists
images
user interface
panel
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
Children
2018-04-24 03:12:54
2018-04-24 06:01:50
2018-04-24 03:12:55
2018-04-24 03:12:56
2018-04-24 03:12:58
2018-04-24 03:12:59
2018-04-24 03:13:01
2018-04-24 04:17:46
2018-04-24 03:13:04
2018-04-24 03:13:05
64.2K
 
121 Fav
Post to Facebook
Tweet this
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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" 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 hide-panel-body"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52d09387ae003_1.JPG" class="panel-image-preview" /> </div> <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> <div class="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-image hide-panel-body"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52cf9489095e8_1.JPG" class="panel-image-preview" /> </div> <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> </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" /> </div> <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> <div class="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-image"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52cd36aac6bed_1.JPG" class="panel-image-preview" /> </div> <div class="panel-body"> <h4>Show the Description by default!</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> </div> </div>
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); .panel-image img.panel-image-preview { width: 100%; border-radius: 4px 4px 0px 0px; } .panel-heading ~ .panel-image img.panel-image-preview { border-radius: 0px; } .panel-image ~ .panel-body, .panel-image.hide-panel-body ~ .panel-body { overflow: hidden; } .panel-image ~ .panel-footer a { padding: 0px 10px; font-size: 1.3em; color: rgb(100, 100, 100); } .panel-image.hide-panel-body ~ .panel-body { height: 0px; padding: 0px; }
$(function() { $('.panel-image img.panel-image-preview').on('click', function(e) { $(this).closest('.panel-image').toggleClass('hide-panel-body'); }); });
Related:
See More
5.5K
7
Portfolio using Panels
2.9K
1
Portfolio using Panels
79.0K
148
Portfolio using Panels No JavaScript!
4.3K
3
Portfolio using Panels No JavaScript!
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76