"card js"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

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.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 ---------->
<h1>Velocity.js <i>sequence</i></h1>
<pre>Click <b><u>popular photos</u></b> to trigger loading + sequence
<span>v1.4 – Added performance test Transit.js/Velocity.js. Check JS source for more.</span>
</pre>
<div id="btn"><i onclick="init(true);">Re-run initial</i> <i onclick="demo();">Demo loop (infinite)</i> <i onclick="window.location=window.location">Reload pen</i></div>
<div id="boxes">
<div class="box">
<img class="boxImage" src="https://farm8.staticflickr.com/7328/9000198669_57003f7505_n.jpg">
<img class="buddy" src="https://farm4.staticflickr.com/3932/buddyicons/43830692@N04_r.jpg?1413100041#43830692@N04">
<div class="inner">
<h3><a href="http://www.flickr.com/photos/tommiehansen/" title="Visit photostream" target="_blank">Tommie Hansen</a></h3>
<span>Stockholm, Sweden</span>
<i class="fa fa-eye" title="Views"> 9841</i>
<i class="fa fa-image" title="Number of images"> 412</i>
<i class="btn openPop">Popular photos</i>
</div>
<div class="pop">
<i class="close">×</i>
<h3><i>Tommie Hansen's</i>Popular photos</h3>
<img src="http://farm8.static.flickr.com/7390/12980175743_5cb04727f3_q.jpg">
<img src="http://farm4.static.flickr.com/3679/12980129103_edbea2fca4_q.jpg">
<img src="http://farm6.static.flickr.com/5497/14367491417_563fcbc6a9_q.jpg">
<img src="http://farm3.static.flickr.com/2573/12980150413_6982593c38_q.jpg">
<a href="http://www.flickr.com/photos/tommiehansen/" target="_blank">Visit flickr photostream</a><!-- yes, target is evil -->
</div>
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
/* + Reset.css */
/* + Open Sans @ Google Fonts */
/* + FontAwesome.css */
/* defaults */
html,body { min-height:100%; }
body { font-family:"Open Sans", helvetica,arial,sans-serif; font-size:13px; line-height: 160%; font-weight: 300; color: #444; background: #eee; }
*,*:before,*:after { box-sizing: border-box; } img { display:block; } i { font-style:normal; } em { font-style:italic; } img { display:block; }
/* Refresh, add boxes etc */
#a { position:absolute; top:20px; right:20px; display: block; background: #eee; color:#aaa; -webkit-user-select: none; user-select: none; } #a i { cursor: pointer; font-size:11px; padding:8px 10px; border:1px dotted #ccc; transition:all .12s; margin-left:-1px; }
#a .fa { font-family: "Open Sans", sans-serif; }
#a .fa:last-child { background:#d00; border-color:#d00; color:#fff; }
#a .fa:last-child:hover { background: #a00; border-color: #a00; }
b { font-weight:400; }
#btn { text-align: center; margin-top:-30px; }
#btn i, #loop i { cursor:pointer; background: hotpink; color:#fff; padding:0 14px; margin:0 2px; line-height:250%; display:inline-block; transition:all .2s ease; border-radius:2px; }
#loop i { background: #aaa; }
#btn i:hover, #loop i:hover { background:#333; }
#loop i { display: inline-block; }
#loop i.off { background: #ccc; }
#loop i.on { background: #0c0; }
#loop { text-align:center; }
#loop p { margin: 0 0 9px; font-size:11px; text-transform:uppercase; }
/* ----- end defaults ---- */
/* Main layout */
#boxes, h1, pre { width: 660px; margin: 40px auto; text-align:center; position: relative; }
#boxes { width:auto; max-width: 850px; text-align:center; }
/*#boxes, .box { transform: translate3d(0,0,0); }*/
/* Headers */
h1,h2 { font-size: 21px; line-height:100%; font-weight:300; }
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
/* + Reset.css */
/* + Open Sans @ Google Fonts */
/* + FontAwesome.css */
/* defaults */
html,body { min-height:100%; }
body { font-family:"Open Sans", helvetica,arial,sans-serif; font-size:13px; line-height: 160%; font-weight: 300; color: #444; background: #eee; }
*,*:before,*:after { box-sizing: border-box; } img { display:block; } i { font-style:normal; } em { font-style:italic; } img { display:block; }
/* Refresh, add boxes etc */
#a { position:absolute; top:20px; right:20px; display: block; background: #eee; color:#aaa; -webkit-user-select: none; user-select: none; } #a i { cursor: pointer; font-size:11px; padding:8px 10px; border:1px dotted #ccc; transition:all .12s; margin-left:-1px; }
#a .fa { font-family: "Open Sans", sans-serif; }
#a .fa:last-child { background:#d00; border-color:#d00; color:#fff; }
#a .fa:last-child:hover { background: #a00; border-color: #a00; }
b { font-weight:400; }
#btn { text-align: center; margin-top:-30px; }
#btn i, #loop i { cursor:pointer; background: hotpink; color:#fff; padding:0 14px; margin:0 2px; line-height:250%; display:inline-block; transition:all .2s ease; border-radius:2px; }
#loop i { background: #aaa; }
#btn i:hover, #loop i:hover { background:#333; }
#loop i { display: inline-block; }
#loop i.off { background: #ccc; }
#loop i.on { background: #0c0; }
#loop { text-align:center; }
#loop p { margin: 0 0 9px; font-size:11px; text-transform:uppercase; }
/* ----- end defaults ---- */
/* Main layout */
#boxes, h1, pre { width: 660px; margin: 40px auto; text-align:center; position: relative; }
#boxes { width:auto; max-width: 850px; text-align:center; }
/*#boxes, .box { transform: translate3d(0,0,0); }*/
/* Headers */
h1,h2 { font-size: 21px; line-height:100%; font-weight:300; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Dark Edition
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: