<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)
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js