"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
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 ---------->
<!--
Hello there! Go check out this wonderful dribbble by Andreea Nicolaescu!
http://dribbble.com/shots/1410207-Food-Widget
-->
<div class="wrapper">
<div class="food">
<div class="cover" style="background-image: url(https://1.bp.blogspot.com/-Y8H-0DWygcI/Uulo6hMuUNI/AAAAAAAALYA/xRbwoLi0qGc/s1600/unsplash_52d5bbef8a613_1.JPG)">
<label>
<i>
<svg x="0px" y="0px" width="17px" height="17px"
>
<g>
<path d="M 7 1 C 7 1.5523 7.6716 2 8.5 2 C 9.3284 2 10 1.5523 10 1 C 10 0.4477 9.3284 0 8.5 0 C 7.6716 0 7 0.4477 7 1 ZM 7 2 C 7 2 0.6875 2.9375 0 7 C 0 7 -0.1875 9.6875 3 11 C 3 11 4.6875 10.9375 6 9 C 6 9 8.3125 12.8125 11 9 C 11 9 12.1875 10.875 14 11 C 14 11 16.75 10.0625 17 7 C 17 7 16.375 3 10.0625 1.9375 C 10.0625 1.9375 8.5 4.25 7 2 ZM 1 11 L 3 17 L 14 17 L 16 11 C 16 11 13.125 13 11 11 C 11 11 8.875 13.375 6 11 C 6 11 3 13.125 1 11 Z" fill="#ffffff"/>
</g>
</svg>
</i>
<font>Macarons</font>
</label>
<a href="#" class="download">
<svg x="0px" y="0px" width="27px" height="22px"
>
<g>
<path d="M 12.5625 0 C 12.0102 0 11.5625 0.4477 11.5625 1 L 11.565 8.69 L 9.0625 8.6875 L 12 16 L 14 16 L 17.0625 8.6875 L 14.5 8.69 L 14.5 1 C 14.5 0.4477 14.0523 0 13.5 0 L 12.5625 0 ZM 1 19 L 1 14 L 0 14 L 0 19 C 0 20.6569 1.3431 22 3 22 L 24 22 C 25.6569 22 27 20.6569 27 19 L 27 14 L 26 14 L 26 19 C 26 20.1046 25.1046 21 24 21 L 3 21 C 1.8954 21 1 20.1046 1 19 Z" fill="#ffffff"/>
</g>
</svg>
</a>
</div>
<div class="info">
<a href="#" class="recipe">
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
.wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(http://c.boylett.uk/images/wallpapers/002.jpg); background-size: 100% 100% }
.food { position: absolute !important; top: 50%; left: 50%; margin: -197px 0 0 -310px }
.food
{
position: relative;
width: 620px;
height: 394px;
background: #FFF;
border-radius: 2px;
box-shadow: 0 2px 15px rgba(0, 0, 0, .5);
}
.food > .cover
{
position: relative;
height: 260px;
background: transparent center no-repeat;
background-size: 100% auto;
border-radius: 2px 2px 0 0;
}
.food > .cover > label
{
position: absolute;
top: 22px;
left: -33px;
height: 33px;
padding: 0 30px 0 63px;
line-height: 33px;
vertical-align: middle;
font-family: sans-serif;
font-size: 13px;
text-transform: uppercase;
color: #FFF;
text-shadow: 0 1px 2px #000;
background: rgba(136, 86, 168, .6);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function()
{
$('.food > .info > .content .stars')
.bind('mousemove', function(e)
{
var pct = e.pageX - $(this).offset().left;
pct = pct / $(this).width() * 100;
$(this).find('> em').css('width', pct + '%');
})
.bind('mouseleave', function()
{
$(this).find('> em').animate({ width: '91%' }, 250);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: