JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-cat-hover" cat-text="Category 1 text">
  <p>Hover for cat 1</p>
</div>
<div class="image-cat-hover" cat-text="Category 2 text">
  <p>Hover for cat 2</p>
</div>
<div class="image-cat-hover" cat-text="Category 3 text">
  <p>Hover for cat 3</p>
</div>
<div>
  <p id="defaultText">Default Text</p>
  <p id="placeholder"></p>
</div>

CSS

* {
    font-size: 20px;
    text-align: center;
}
.image-cat-hover {
    float: left;
    width: 150px;
    border: thin solid #CCC;
    margin-bottom: 20px;
}
#cats, .default { 
    width: 450px;
}

JavaScript

$(document).ready(function() {

    $(".image-cat-hover").hover(function() {
        $("#defaultText").toggle();
        $("#placeholder").text($(this).data("category"));
    });
});