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

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