<svg style="display: none;">
<symbol id="star" viewBox="0 0 98 92">
<title>star</title>
<path stroke='#fff' stroke-width='12' d='M49 73.5L22.55 87.406l5.05-29.453-21.398-20.86 29.573-4.296L49 6l13.225 26.797 29.573 4.297-21.4 20.86 5.052 29.452z' fill-rule='evenodd'/></symbol>
</svg>
<div class="card">
<div class="rating">
<div class="stars">
<div class="star"><svg><use xlink:href="#star"></use></svg></div>
<div class="star"><svg><use xlink:href="#star"></use></svg></div>
<div class="star"><svg><use xlink:href="#star"></use></svg></div>
<div class="star"><svg><use xlink:href="#star"></use></svg></div>
<div class="star no-fill"><svg><use xlink:href="#star"></use></svg></div>
</div>
</div>
<div class="food-info">
<p>Spicy Sausage Soup
<br/><span>with Steamed Broccoli</span></p>
<div class="favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.3 80.6"><path d="M86.2 7c-9.4-9.4-24.6-9.4-33.9 0l-5.7 5.7L41 7C31.6-2.3 16.4-2.3 7 7c-9.3 9.4-9.3 24.6 0 34l5.7 5.7 33.9 33.9 33.9-33.9 5.7-5.7c9.4-9.4 9.4-24.6 0-34z"/></svg>
</div>
</div>
</div>
body {
align-items: center;
display: flex;
font-family: 'Rubik', sans-serif;
justify-content: center;
height: 100vh;
}
.card {
background-image: url(https://myhappyplates-cdn.s3.amazonaws.com/images/recipes/22ca5843-8cc1-4e0d-ab0a-ea8520b16e13.jpeg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
box-shadow:
1px 3px 3px rgba(0,0,0,0.2),
-1px -1px 4px rgba(0,0,0,0.2);
height: 300px;
position: relative;
transition: box-shadow 130ms ease-in-out;
width: 300px;
}
.card:hover {
box-shadow:
2px 6px 6px rgba(0,0,0,0.2),
-1px -1px 7px rgba(0,0,0,0.2);
}
.rating {
padding: 0.75em;
}
.rating .star {
display: inline-block;
position: relative;
}
.rating .star:before {
background-color: rgba(0,0,0,0.05);
box-shadow: 0 2px 3px rgba(0,0,0,0.15);
content: '';
height: 12px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 3px;
width: 12px;
z-index: 0;
border-radius: 50%;
}
.rating .star svg {
fill: white;
height: 1em;
position: relative;
width: 1em;
z-index: 1;
}
.star.no-fill svg{
fill: none;
}
.favorite {
transition: all 111ms ease-in-out;
}
.favorite svg {
fill: none;
height: 1em;
padding: 1px;
transition: all 111ms ease-in-out;
stroke: lightgray;
stroke-width: 12;
width: 1em;
}
.favorite:hover svg {
cursor: pointer;
stroke: tomato;
}
.favorite.js-is-selected svg {
fill: tomato;
stroke: tomato;
}
.food-info {
background-color: white;
bottom: 0;
left: 0;
padding: 1em 2em 2em 1em;
position: absolute;
right: 0;
}
.food-info p {
margin: 0;
}
.food-info p span {
color: gray;
font-size: 14px;
}
.food-info .favorite {
position: absolute;
right: 10px;
top: 10px;
}
var selected = 'js-is-selected';
$('.favorite').click(function() {
if( $(this).hasClass(selected)) {
$(this).removeClass(selected)
} else {
$(this).addClass(selected)
}
})
This Pen doesn't use any external CSS resources.