JSFiddle - React, Tailwind, and code Playground

by Mark Byrne

HTML

<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>Cannabaceae.</a>

</p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 2</a>

</p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 3</a>

</p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 4</a>

</p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 5</a>

</p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 6</a>

</p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 7</a>

</p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 8</a>

</p>

CSS

p.product a img {
    display: none;
    position: absolute;
    left: -80px;
    top: -22px;
}
p.product a {
    display: inline-block;
    position: relative;
}
p.product {
    margin-left: 100px;
}

JavaScript

$(document).ready(function () {
    $(".product a").mouseover(function () {
        $(".product a img").css("display", "none"); // hide all product images
        $(this).find("img").css("display", "inline-block"); // show current hover image
    })
    $(".product a").mouseout(function () {
        $(".product a img").css("display", "none"); // hide all product images
    })
});