JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_authors" class="clearfix">
            <ul id="authors_list">
                <li class="author_img01">IMAGE_HOVER</li>
                <li class="author_img02">IMAGE_HOVER</li>
                <li class="author_img03">IMAGE_HOVER</li>
                <li class="author_img04">IMAGE_HOVER</li>
            </ul>
            <br style="clear:both;" />
            <ul id="authors_names">
                <li class="author_name01">Herr Schmitt +</li>
                <li class="author_name02">Herr Schneider +</li>
                <li class="author_name03">Herr Mayer +</li>
                <li class="author_name04">Herr Müller +</li>
            </ul>
        </div>

CSS

#authors_names li{ display: none}

JavaScript

$(function (){
    
    //$("#authors_list li").hover(function () {
      //  $("#authors_names li:eq("+$(this).index()+")").slideToggle("slow");
    //});
    
    /*
    * Ich würde diese Variante vorziehen, 
    * falls du verhinden möchtest das man zwischen 
    * den Bildern schnell wechseln kann.
    */
    
    $("#authors_list li").hover(function () {
        $("#authors_names li:eq("+$(this).index()+")")
            .stop().show();
   
    },
     function () {
    $("#authors_names li:eq("+$(this).index()+")")
            .stop().hide();
  }

                                
                               
      );
    
});