<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">
<i>
<svg x="0px" y="0px" width="26px" height="28px"
>
<g>
<path d="M 8.5 20 L 8.5 21 L 17.5 21 L 17.5 20 L 8.5 20 ZM 8.5 16 L 8.5 17 L 17.5 17 L 17.5 16 L 8.5 16 ZM 8.5 12 L 8.5 13 L 17.5 13 L 17.5 12 L 8.5 12 ZM 20 0 C 19.4477 0 19 0.4477 19 1 L 19 6 C 19 6.5523 19.4477 7 20 7 C 20.5523 7 21 6.5523 21 6 L 21 1 C 21 0.4477 20.5523 0 20 0 ZM 13 0 C 12.4477 0 12 0.4477 12 1 L 12 6 C 12 6.5523 12.4477 7 13 7 C 13.5523 7 14 6.5523 14 6 L 14 1 C 14 0.4477 13.5523 0 13 0 ZM 6 0 C 5.4477 0 5 0.4477 5 1 L 5 6 C 5 6.5523 5.4477 7 6 7 C 6.5523 7 7 6.5523 7 6 L 7 1 C 7 0.4477 6.5523 0 6 0 ZM 15 4 L 18 4 L 18 3 L 15 3 L 15 4 ZM 8 4 L 11 4 L 11 3 L 8 3 L 8 4 ZM 3 4 L 4 4 L 4 3 L 3 3 C 1.3431 3 0 4.3431 0 6 L 0 25 C 0 26.6569 1.3431 28 3 28 L 23 28 C 24.6569 28 26 26.6569 26 25 L 26 6 C 26 4.3431 24.6569 3 23 3 L 22 3 L 22 4 L 23 4 C 24.1046 4 25 4.8954 25 6 L 25 25 C 25 26.1046 24.1046 27 23 27 L 3 27 C 1.8954 27 1 26.1046 1 25 L 1 6 C 1 4.8954 1.8954 4 3 4 Z" fill="#ffffff"/>
</g>
</svg>
</i>
<font>Details</font>
</a>
<div class="content">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" class="pad-right"><strong>Ingredients:</strong></td>
<td align="left" valign="middle">sugar, egg whites, butter, salt cappuccino, cinnamon.</td>
<td width="20" rowspan="2" class="border-right"> </td>
<td width="140" rowspan="2" align="center" valign="middle">
<h1>9.75</h1>
<span class="stars">
<em style="width: 91%"></em>
</span><br />
<small>(320 ratings)</small>
</td>
</tr>
<tr>
<td align="left" valign="middle" class="pad-right"><strong>Consumers:</strong></td>
<td align="left" valign="middle" class="consumers">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105584/profile/profile-80_5.jpg" />
<img src="https://d13yacurqjgara.cloudfront.net/users/17164/avatars/small/img.jpg?1391351372" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/57185/profile/profile-80_3.jpg" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/profile/profile-80_21.jpg" />
<span>(+20)</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
.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);
}
.food > .cover > label > i
{
position: absolute;
top: 0;
left: 0;
}
.food > .cover > label > i > svg
{
margin: 8px;
}
.food > .cover > .download
{
display: block;
position: absolute;
bottom: 20px;
right: 20px;
width: 47px;
height: 47px;
background: rgba(51, 193, 210, .6);
border-radius: 100%;
}
.food > .cover > .download:hover { background: #33C1D2 }
.food > .cover > .download > svg
{
margin: 12px 10px 0;
}
.food > .info
{
position: relative;
height: 134px;
overflow: hidden;
border-radius: 0 0 2px 2px;
}
.food > .info > .recipe
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 134px;
height: 134px;
background: #8856A8;
font-family: sans-serif;
font-size: 14px;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
text-align: center;
border-radius: 0 0 0 2px;
}
.food > .info > .recipe:hover { background: #9967B9 }
.food > .info > .recipe > i
{
display: block;
margin: 38px 0 15px;
}
.food > .info > .content
{
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 154px;
font-family: sans-serif;
font-size: 14px;
color: #888;
}
.food > .info > .content strong { font-weight: normal; color: #333 }
.food > .info > .content .pad-right { padding-right: 20px }
.food > .info > .content .border-right { border-right: 1px solid #D9D9D9 }
.food > .info > .content .consumers img, .food > .info > .content .consumers span { display: inline-block; width: 32px; height: 32px; margin: 0 2px 0 0; line-height: 32px; vertical-align: middle; border-radius: 100% }
.food > .info > .content .consumers span { margin: 0 }
.food > .info > .content h1
{
margin: 0 0 10px;
font-size: 26px;
font-weight: normal;
color: #333;
}
.food > .info > .content .stars, .food > .info > .content .stars > em
{
display: block;
width: 99px;
height: 18px;
margin: 0 auto 7px;
text-align: left;
background: url(http://c.boylett.uk/generic/image_png_00004.png);
}
.food > .info > .content .stars > em
{
width: 99px;
height: 18px;
margin: 0;
background: url(http://c.boylett.uk/generic/image_png_00004.png);
background-position: 0 -18px;
}
$(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);
});
});
