JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="title-holder">
        <a href="somelink.html">long text that needs to scroll, long text that needs to scroll, long text that needs to scroll</a>
    </div>
    <div class="image"></div>
</div>

CSS

div.container{
  width: 130px;
}
div.title-holder {
  width: 130px;
  height:20px;
  text-align:center;
  background: silver;
  overflow:hidden;
    position: relative;
}
div.title-holder a {  
  position: relative;  
  white-space:nowrap;  
    left: 0px;
}
div.image{
    background: brown;
    width: 100%;
    height: 100px;
}

JavaScript

$(function(){
var scroll_text;
$('div.container').hover(
    function () {
        var $elmt = $(this);
        scroll_text = setInterval(function(){scrollText($elmt);}, 150);
    },
    function () {
        clearInterval(scroll_text);
        $(this).find('div.title-holder a').css({
            left: 0
        });
    }
);
    
    var scrollText = function($elmt){
        var left = $elmt.find('div.title-holder a').position().left - 1;
        left = -left > $elmt.find('div.title-holder a').width() ? $elmt.find('div.title-holder').width() : left;
        $elmt.find('div.title-holder a').css({
            left: left
        });
    };
    
});