JSFiddle - React, Tailwind, and code Playground

HTML

<!--Example 1-->
<div class="container"> <span class="text">Selenium</span>

    <div class="rate rate50"></div>
</div>
<!--Example 2-->
<div class="skillsDouble">
    <ul>
        <li class="redFade">Selenium</li>
    </ul>
</div>

CSS

.container {
    width:81px;
    padding:11px 16px;
    background:#BF342B;
    height:20px;
    text-align:center;
}
.rate , .rate50 {
    background:url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png');
    height:20px;
}
.rate50 {
    background:
         url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png') 40px -24px no-repeat,
         url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png') 60px -24px no-repeat, 
         url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png');
}
.skillsDouble li.redFade {
  
    background: #333333;
    display: block;
    font-weight: bold;
    padding: 11px 16px;
    text-align: center;
    width: 81px;
}}
.skillsDouble li.redFade:hover {
    cursor: pointer;
}

JavaScript

$('.rate').hide();

$('.container').hover(function () {
    $('.text').hide();
    $('.rate').animate({
        left: 400,
        opacity: "show"
    }, 1500);
}, function () {
    $('.rate').hide();
    $('.text').fadeIn(1000);
});