"card"
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
<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 ---------->
<figure class="effect1">
<img src="http://www.catsuka.com/videos/player/vignettes/lascars_le_film_bande_annonce_old.jpg" alt="Skadoosh" width="350">
<figcaption>Skadoosh!</figcaption>
</figure>
<figure class="effect2">
<img src="http://www.catsuka.com/videos/player/vignettes/lascars_le_film_bande_annonce_old.jpg" alt="Skadoosh" width="350">
<figcaption>Skadoosh!</figcaption>
</figure>
<!-- Another Pen? codepen.io/Twikito -->
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
/* BASE */
figure {
display:inline-block; padding:10px; margin:30px;
border:1px solid #ddd;
background:#fff;
}
figcaption {
font:1.5em/2em "Rock Salt", cursive; color:#5b5983;
}
/* EFFECTS */
.effect1 {
position:relative;
}
.effect1::before, .effect1::after {
position:absolute; bottom:15px; top:80%; left:10px; z-index:-1; width:50%; max-width:300px;
background:rgba(0,0,0,.8);
content:""; box-shadow:0 15px 10px rgba(0,0,0,.7); transform: rotate(-3deg);
}
.effect1::after {
right:10px; left:auto;
transform: rotate(3deg);
}
.effect2 {
position:relative;
box-shadow:0 1px 4px rgba(0,0,0,.1), 0 0 40px rgba(0,0,0,.05) inset;
}
.effect2::after {
position:absolute; top:50%; bottom:0; left:10px; right:10px; z-index:-1;
border-radius:100px / 10px;
content:""; box-shadow:0 0 20px rgba(0,0,0,.8);
}
/* BLAH BLAH */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Coming Sssoon Page
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: