.star-rating {
    width: 0;
    position: relative;
    display:inline-block;
    background-image: url(star_0.svg);
    background-position: 0 0;
    background-repeat: repeat-x;
    cursor: pointer;
}

.star-rating[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

.star-rating .star-value {
    height: 100%;
    position: absolute;
}

.star-rating .star-value {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url('./star_1.svg') ;
    background-repeat: repeat-x;
}