"Information Card"
Bootstrap 3.1.0 Snippet by mouse0270

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="row"> <div class="[ col-sm-6 col-md-offset-2 col-md-4 ]"> <div class="[ info-card ]"> <img style="width: 100%" src="https://avatars.githubusercontent.com/u/564874?v=3" /> <div class="[ info-card-details ] animate"> <div class="[ info-card-header ]"> <h1> Robert McIntosh </h1> <h3> aka Mouse0270 </h3> </div> <div class="[ info-card-detail ]"> <!-- Description --> <p>The idea of creating something out of nothing has always generated a passion in my heart. This is what lead me to website development. I can literally create little worlds that hopefully thousands of people can see and even experience.</p> <div class="social"> <a href="https://www.facebook.com/rem.mcintosh" class="[ social-icon facebook ] animate"><span class="fa fa-facebook"></span></a> <a href="https://twitter.com/Mouse0270" class="[ social-icon twitter ] animate"><span class="fa fa-twitter"></span></a> <a href="https://github.com/mouse0270" class="[ social-icon github ] animate"><span class="fa fa-github-alt"></span></a> <a href="https://plus.google.com/u/0/115077481218689845626/posts" class="[ social-icon google-plus ] animate"><span class="fa fa-google-plus"></span></a> <a href="www.linkedin.com/in/remcintosh/" class="[ social-icon linkedin ] animate"><span class="fa fa-linkedin"></span></a> </div> </div> </div> </div> </div> <div class="[ col-sm-6 col-md-4 ]"> <div class="[ info-card ]"> <img style="width: 100%" src="http://api.randomuser.me/portraits/women/45.jpg" /> <div class="[ info-card-details ] animate"> <div class="[ info-card-header ]"> <h1> Caroline Samantha Henderson </h1> <h3> aka not a real person </h3> </div> <div class="[ info-card-detail ]"> <!-- Description --> <p>People often say that beauty is in the eye of the beholder, and I say that the most liberating thing about beauty is realizing that you are the beholder. This empowers us to find beauty in places where others have not dared to look including inside ourselves.</p> </div> </div> </div> </div> </div> </div>
@import url(//fonts.googleapis.com/css?family=Lato:400,900); @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); body { padding: 60px 0px; } .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .info-card { width: 100%; border: 1px solid rgb(215, 215, 215); position: relative; font-family: 'Lato', sans-serif; margin-bottom: 20px; overflow: hidden; } .info-card > img { width: 100px; margin-bottom: 60px; } .info-card .info-card-details, .info-card .info-card-details .info-card-header { width: 100%; height: 100%; position: absolute; bottom: -100%; left: 0; padding: 0 15px; background: rgb(255, 255, 255); text-align: center; } .info-card .info-card-details::-webkit-scrollbar { width: 8px; } .info-card .info-card-details::-webkit-scrollbar-button { width: 8px; height: 0px; } .info-card .info-card-details::-webkit-scrollbar-track { background: transparent; } .info-card .info-card-details::-webkit-scrollbar-thumb { background: rgb(160, 160, 160); } .info-card .info-card-details::-webkit-scrollbar-thumb:hover { background: rgb(130, 130, 130); } .info-card .info-card-details .info-card-header { height: auto; bottom: 100%; padding: 10px 5px; } .info-card:hover .info-card-details { bottom: 0px; overflow: auto; padding-bottom: 25px; } .info-card:hover .info-card-details .info-card-header { position: relative; bottom: 0px; padding-top: 45px; padding-bottom: 25px; } .info-card .info-card-details .info-card-header h1, .info-card .info-card-details .info-card-header h3 { color: rgb(62, 62, 62); font-size: 22px; font-weight: 900; text-transform: uppercase; margin: 0 !important; padding: 0 !important; } .info-card .info-card-details .info-card-header h3 { color: rgb(142, 182, 52); font-size: 15px; font-weight: 400; margin-top: 5px; } .info-card .info-card-details .info-card-detail .social { list-style: none; padding: 0px; margin-top: 25px; text-align: center; } .info-card .info-card-details .info-card-detail .social a { position: relative; display: inline-block; min-width: 40px; padding: 10px 0px; margin: 0px 5px; overflow: hidden; text-align: center; background-color: rgb(215, 215, 215); border-radius: 40px; } a.social-icon { text-decoration: none !important; box-shadow: 0px 0px 1px rgb(51, 51, 51); box-shadow: 0px 0px 1px rgba(51, 51, 51, 0.7); } a.social-icon:hover { color: rgb(255, 255, 255) !important; } a.facebook { color: rgb(59, 90, 154) !important; } a.facebook:hover { background-color: rgb(59, 90, 154) !important; } a.twitter { color: rgb(45, 168, 225) !important; } a.twitter:hover { background-color: rgb(45, 168, 225) !important; } a.github { color: rgb(51, 51, 51) !important; } a.github:hover { background-color: rgb(51, 51, 51) !important; } a.google-plus { color: rgb(244, 94, 75) !important; } a.google-plus:hover { background-color: rgb(244, 94, 75) !important; } a.linkedin { color: rgb(1, 116, 179) !important; } a.linkedin:hover { background-color: rgb(1, 116, 179) !important; }

Related: See More


Questions / Comments:

if you need any category website just click blew link
http://designbootstrap.net/

Hmnazim Nazim () - 7 years ago - Reply 0


yo great, i like the looks of it, but when disappearing the user's infos go briefly to the top then drop down...

jackalicehlv () - 9 years ago - Reply 0


nice work man,thx

Lucy () - 10 years ago - Reply 0


This snippet is great! Thanks a lot!

Jeroen Coupé () - 10 years ago - Reply 0


How can I put 4 profiles in the same line? Cheers!

ollseph () - 10 years ago - Reply 0


You would just have to change the col-sm-6 to col-sm-3 and col-md-3

mouse0270 () - 10 years ago - Reply 0


Hi Great Snippet! Checkout my version :) http://bootsnipp.com/iframe...

Mike25 () - 10 years ago - Reply 0


The link seems to be broken.

mouse0270 () - 10 years ago - Reply 0


Very nice snippet! I have a question though, why is every class prefixed and suffixed with braces ("[ ]")?

maxsurguy () - 10 years ago - Reply 0


oh it is something I started to do to keep track of different class groups. So if I had a some bootstrap classes and my own missed together it would would look like "[ col-sm-offset-4 col-sm-4 ][ parallax-background white-text ][ wow fadeInLeftBig ]". This way I can tell which classes are bootstrap, which control the styling and which controls the elements animation. It has been habit for me for the past month or so. I usually remember to remove them before posting the snippet.

mouse0270 () - 10 years ago - Reply 0


Great habit. I will use it also, if there isn't any privacy concern, lol?

Mustafa Ehsan Alokozay () - 10 years ago - Reply 0


The only thing you have to make sure when doing this is that the ("[ ]") do not touch any of the class names because ("[col-xs-12 ]") is not the same as ("[ col-xs-12 ]")

mouse0270 () - 10 years ago - Reply 0


Well and it's probably not so great if you use [ or ] as an selector.. :P

Alex () - 10 years ago - Reply 0


this would still work, because if you were using ("[ or ]") as a selector in either CSS or javascript it would be (".[.or.]") not ("[ or ]")

mouse0270 () - 10 years ago - Reply 0


Oh Yeah All right :P

Alex () - 10 years ago - Reply 0