JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="videos">
<li><a href="#">shit swag people say</a></li>
<li><a href="#">imdabest</a></li>
<li><a href="#">jersey shore audition</a></li>

<li><a href="#">rifle burs</a></li>
<li><a href="#">mvc3: best combos dat ass</a></li>
    <li><a href="#">snacks</a></li>

</ul>

CSS

ul#videos > li > a {opacity:.5; color:#222; text-decoration:none;}
ul#videos:hover > li > a {opacity:.3; text-shadow:0px 0px 6px #bbb; color:#bbb;} 
ul#videos > li:hover > a {opacity:1; text-shadow:none; color:#222; }

JavaScript

$("#videos li").on({
    
      mouseenter: function() {
         $(this).animate({"padding-left": "50px"}, "normal");
      },
    
      mouseleave: function() {
           $(this).stop(true).animate({"padding-left": "0px"}, "slow");
    
      }}, 'a');