Bootstrap Snippet Information Card using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfa1/t1.0-9/417157_4897339837183_626079670_n.jpg" />
                    <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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    @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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Information Card"
Bootstrap 3.1.0 Snippet by gnath

Related: See More

Questions / Comments:

"Information Card" Bootstrap 3.1.0 Snippet by gnath

Related: See More

Questions / Comments:

"Information Card"
Bootstrap 3.1.0 Snippet by gnath