JSFiddle - React, Tailwind, and code Playground

by Jatin Patil

HTML

<div id="wrap">
    
<h1>Image Highlight Demo</h1>

    <ul id="IMgOut">
        <li><span></span></a>

            <ul id="IMgInn">
                <li><a href="#url">A<b id="A1"></b></a>,&nbsp;</li>
                <li><a href="#url">B<b id="B2"></b></a>,&nbsp;</li>
                <li><a href="#url">C<b id="C3"></b></a>,&nbsp;</li>
                <li><a href="#url">D<b id="D4"></b></a>,&nbsp;</li>
                <li><a href="#url">E<b id="E5"></b></a>,&nbsp;</li>
                <li><a href="#url">F<b id="F6"></b></a>,&nbsp;</li>
                <li><a href="#url">G<b id="G7"></b></a>,&nbsp;</li>
                <li><a href="#url">H<b id="H8"></b></a>,&nbsp;</li>
                <li><a href="#url">I<b id="I9"></b></a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#wrap {
    position:relative;
    width:710px;
    height:560px;
    background:#222;
    padding:20px;
    position:relative;
    font-family: sans-serif;
}
#wrap h1 {
    color:#fff;
    font-family:arial, sans-serif;
    font-weight:normal;
    font-size:22px;
}
#IMgOut {
    padding:0;
    margin:0;
    list-style:none;
}
#IMgOut li a {
    color:#777;
    text-decoration:none;
}
#IMgOut table {
    border-collapse:collapse;
    width:0;
    height:0;
    margin:-1px -4px;
}
#IMgOut span {
    display:block;
    width:390px;
    height:390px;
    background:url(CompleteImage);
    position:absolute;
    left:350px;
    top:200px;
}
#IMgInn {
    padding:0;
    margin:0;
    list-style:none;
}
#IMgInn li {
    float:left;
    color:#777;
    font-size:23px;
}
#IMgInn li a {
    float:left;
    color:#777;
    text-decoration:none;
    font-size:23px;
    white-space:nowrap;
}
#IMgInn li a b {
    display:block;
    width:130px;
    height:130px;
    position:absolute;
    background:#transparent;
}
#IMgInn li a b#A1 {
    left:350px;
    top:200px;
}
#IMgInn li a b#B2 {
    left:480px;
    top:200px;
}
#IMgInn li a b#C3 {
    left:610px;
    top:200px;
}
#IMgInn li a b#D4 {
    left:350px;
    top:330px;
}
#IMgInn li a b#E5 {
    left:480px;
    top:330px;
}
#IMgInn li a b#F6 {
    left:610px;
    top:330px;
}
#IMgInn li a b#G7 {
    left:350px;
    top:460px;
}
#IMgInn li a b#H8 {
    left:480px;
    top:460px;
}
#IMgInn li a b#I9 {
    left:610px;
    top:460px;
}
#IMgOut li a:hover {
    border:0;
}
#IMgOut :hover span {
    background:url(image/dark.jpg);
}
#IMgInn li a:hover {
    color:#fff;
}
#IMgInn li a:hover b {
    cursor:pointer;
}
#IMgInn :hover b#A1 {
    background:#fff url(http://1.bp.blogspot.com/-WDaDuF-55Ts/UEeR4724BXI/AAAAAAAAA-A/yEgGwYCJ-3w/s1600/demo.jpg);
}
#IMgInn :hover b#B2 {
    background:#fff url(http://b.vimeocdn.com/ps/341/341641_300.jpg);
}
#IMgInn :hover b#C3 {
    background:#fff...