JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image1 image">
  <p>Hover for cat 1</p>
</div>
<div class="image2 image">
  <p>Hover for cat 2</p>
</div>
<div class="image3 image">
  <p>Hover for cat 3</p>
</div>
<div class="default">
  <p>Default Text</p>
</div>

CSS

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

JavaScript

$(document).ready(function() {
    $('.image').hover(
        function(){
            $('.default p').html($(this).children('p').html());
        }, 
        function(){$('.default p').html('Default Text')}); 
});