"gold 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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="snip1560">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample23.jpg" alt="pr-sample23" />
<figcaption>
<h4>Fleece Marigold</h4>
<h2>World <span>Delivery</span></h2>
<h3>Shop Now</h3>
</figcaption>
<a href="#" class="link"></a>
</figure>
<figure class="snip1560"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample24.jpg" alt="pr-sample24" />
<figcaption>
<h4>Norman Gordon</h4>
<h2>Summer <span>Sale</span></h2>
<h3>Read More</h3>
</figcaption>
<a href="#" class="link"></a>
</figure>
<figure class="snip1560"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="pr-sample25" />
<figcaption>
<h4>Ruby Von Rails</h4>
<h2>Forever <span>Young</span></h2>
<h3>Details</h3>
</figcaption>
<a href="#" class="link"></a>
</figure>
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(https://fonts.googleapis.com/css?family=Open+sans:700);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
.snip1560 {
font-family: 'Open Sans', Arial, sans-serif;
display: inline-block;
margin: 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: none !important;
position: relative;
padding: 10px;
border: 2px solid #e8b563;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1560:before {
content: '';
background-color: #000000;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
z-index: -1;
}
.snip1560 * {
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
/* Demo purposes only */
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Design System
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: