rating-source.html

<div class="ratingHolder">
   <div class="passiveRatingHolder">
       <div class="ratingBg"></div>
       <div style="width: 85%;" class="ratingMask"></div>
   </div>
   <div class="rateNumbers">
       <div>
           <span class="ratingvalue">4.25</span>
           /
           <span class="bestrating">5.00</span>
           <div class="br"></div>
           (
           <span class="commentscount">4</span>
           голосов)
       </div>
   </div>
</div>

<style>
   .ratingHolder {
      width: 210px;
      position: relative;
   }
   .ratingHolder .passiveRatingHolder {
      position: relative;
      width: 178px; height: 37px;
      left: 50%; margin-left: -89px; display: block;
   }
   .ratingHolder .passiveRatingHolder > div {
      position:absolute; left: 0; top: 0;
      height: 37px;
      background-image: url("stars.svg");
      background-repeat: no-repeat;
      background-size: 178px;
   }
   .ratingHolder .passiveRatingHolder .ratingBg {background-position: 0 0; width: 178px; z-index: 1;}
   .ratingHolder .passiveRatingHolder .ratingMask {background-position: 0 -41px; z-index: 99;}
   .ratingHolder .rateNumbers {text-align: center; width: 100%; color: #a1a1a1;font-size: 14px;}
   .ratingHolder .rateNumbers .ratingvalue {color: #2d2d2d; font-size: 26px;}
   .ratingHolder .rateNumbers .bestrating {margin-bottom: 4px; display: inline-block; font-size: 20px;}
</style>

<div class="userRatingHolder">
   <div class="userRating">
       <div class="votingHolder">
           <div data-score="5" class="vote onestar"></div>
           <div data-score="4" class="vote twostar"></div>
           <div data-score="3" class="vote threestar"></div>
           <div data-score="2" class="vote fourstar"></div>
           <div data-score="1" class="vote fivestar"></div>
       </div>
   </div>
</div>

<style>
   .ratingHolder .userRatingHolder {
      opacity: 0;
      transition: .1s;
   }
   .ratingHolder:hover .userRatingHolder, .ratingHolder.voted .userRatingHolder {
      opacity: 1; transition: .1s;
   }
</style>

<style>
   .ratingHolder .userRating {
      position: absolute; top: -10px; left: 0;
      padding: 10px 16px;
      cursor: pointer;
      z-index: 9999;
      background-color: #ffffff;
      border-radius: 5px;
      width: 178px; height: 31px;
   }
   .ratingHolder.voted .userRating {background-color: #598a86;}
</style> 

<style>
   .ratingHolder.voted .vote {pointer-events:none;}
</style> 

<style>
   .ratingHolder .vote {
      transition: .2s;
      position: absolute; top: 0;
      cursor: pointer;
      z-index: 99999;
      width: 32px; height: 31px;
      background-image: url("stars.svg");
      background-repeat: no-repeat; background-position: 0 0; background-size: 178px;
   }
   
   .ratingHolder .vote:hover, .ratingHolder.voted .vote.active {
      transition: .2s; background-position: 0 -81px;
   }
   
   .ratingHolder .vote:hover ~ .vote, .vote.active ~ .vote {
      transition: .2s; background-position: 0 -41px;
   }
   
   .ratingHolder .votingHolder {direction: rtl; position: relative}
   
   .ratingHolder .vote.onestar {left: 80%;}
   .ratingHolder .vote.twostar {left: 60%;}
   .ratingHolder .vote.threestar {left: 40%;}
   .ratingHolder .vote.fourstar {left: 20%;}
   .ratingHolder .vote.fivestar {left: 0;}
   
   .ratingHolder.voted .vote:hover {background-position: 0 0;}
   .ratingHolder.voted .vote.active ~ .vote {background-position: 0 -41px;}
   .ratingHolder.voted .vote.active:hover {background-position: 0 -81px;}
</style> 

<div class="text">Ваш голос учтен!</div>

<style>
   .ratingHolder .text {color: #4f8d88; text-align: center; margin: 0; opacity: 0; transition: .1s; height: 0px;}
   .ratingHolder.voted .text {opacity: 1; margin: 10px 0 0 0; transition: .1s; height: auto;}
</style> 

<script>
   $( document ).ready(function() {
      
       $('.vote').on ('click', function(){
          
           $(this).addClass('active');
          
           var parent = $(this).parent().parent().parent().parent();
           var commentCountElement = parent.find('.commentscount');
           var ratingValueElement = parent.find('.ratingvalue');
           var votedValue = parseInt($(this).attr('data-score'));
          
           parent.addClass('voted');
          
           var commentCount = parseInt(commentCountElement.text());
          
           commentCount = commentCount;
           commentCountElement.text(commentCount + 1);
          
           var rating = parseFloat(ratingValueElement.text());
           rating = (commentCount * rating + votedValue)/(commentCount + 1);
           ratingValueElement.text(rating.toFixed(2));
          
           console.log('AJAX запрос примет значение ' + votedValue);
       })
   })
</script>
<div itemscope="" itemtype="http://schema.org/CollectionPage" class="ratingHolder">
   <div class="userRatingHolder">
      <div class="userRating">
          <div class="votingHolder">
             <div data-score="5" class="vote onestar"></div>
             <div data-score="4" class="vote twostar"></div>
             <div data-score="3" class="vote threestar"></div>
             <div data-score="2" class="vote fourstar"></div>
             <div data-score="1" class="vote fivestar"></div>
          </div>
      </div>
   </div>
   <div class="passiveRatingHolder">
      <div class="ratingBg"></div>
      <div style="width: 85%;" class="ratingMask"></div>
   </div>
   <div class="text">Ваш голос учтен!</div>
   <div class="rateNumbers">
      <div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
          <span itemprop="ratingValue" class="ratingvalue">4.25</span>
          /
          <span itemprop="bestRating" class="bestrating">5.00</span>
          <div class="br"></div>
          (
          <span itemprop="reviewCount" class="commentscount">4</span>
          голосов)
       </div>
    </div>
</div>

stars.svg