css
    -------------
    #div{width: 900px;height: 400px; border: 1px solid black;}
    ul{display: grid;grid-template-columns: auto auto auto auto auto; position: relative; left: -20px }
    ul li{border: 1px solid black;width: 140px;height: 140px;background: gainsboro;margin: 15px;box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);list-style-type: none;}
    ul li a{margin:0px;text-decoration:none;position: relative;top: 50px}
    ul li img{border:2px solid black;width:160px;height:160px;position: relative; top: -32px;left: -11px; display: none;box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);cursor:crosshair;}
    
    html
    -------------
    <center><div id="div">
        <ul>
            <li>
                <ahref="javascript:;"><b>BMW</b></a>
                <imgsrc="img/bmw.jpg">
            </li>
            <li>
                <ahref="javascript:;"><b>Alfa Romeo</b></a>
                <imgsrc="img/alpha.jpg">
            </li>
            <li>
                <ahref="javascript:;"><b>Skoda</b></a>
                <imgsrc="img/skoda.jpg">
            </li>
            <li>
                <ahref="javascript:;"><b>Volkswagen</b></a>
                <imgsrc="img/vw.jpg">
            </li>
            <li>
                <ahref="javascript:;"><b>Saab</b></a>
                <imgsrc="img/saab.jpg">
            </li>
            <li>
                <ahref="javascript:;"><b>Lamborghini</b></a>
                <imgsrc="img/lam.jpg">
            </li>
            <li>
                <ahref="javascript:;"><b>Porsche</b></a>
                <imgsrc="img/por.jpg">
            </li>
            <li>
                <ahref="javascript:;"><b>Peugeot</b></a>
                <imgsrc="img/peu.jpg">
            </li>
            <li>
                <ahref="javascript:;"><b>Mercedes</b></a>
                <imgsrc="img/mede.jpg">
            </li>
            <li>
                <ahref="javascript:;"><b>Buick</b></a>
                <imgsrc="img/buick.jpg">
            </li>
        </ul>
    </div></center>

    js
    -----------
    var aLi=document.getElementsByTagName('li');
    var aA=document.getElementsByTagName('a');
    var aImg=document.getElementsByTagName('img');   
    
    for(var i=0;i<aLi.length;i++)
    {
        aLi[i].index=aA[i].index=aImg[i].index=i;
        aLi[i].onmouseover = function()
        {
            aImg[this.index].style.display='block'
        };
            aLi[i].onmouseout=function(){
            aImg[this.index].style.display = 'none' 
        }
    }